react-redux

To understand

1. What is redux

Official explanation: Redux is a container of predictable state for JS applications. Can be understood as a global data state management tool (state manager), used to do component communication, etc.

2、为什么使用redux

When redux is not used, passing values between sibling components is cumbersome and the code is complex and redundant. Using Redux to define a global single data Store, you can customize what data is stored in the Store, and the entire data structure is also clear.

3, the state

State in the front end is data, it’s an object. State in redux cannot be changed directly, only through action, which is equivalent to defining setter methods in a singleton.

4, the action

Redux describes each change as an action, and to change the contents of state, you need to send the action. An action is a simple object that describes what has changed in state.

const INCREMENT = 'INCREMENT'
const incrementAction = {"type": INCREMENT, "count": 2}
Copy the code

This is an action, which is an object, based on the type of the action.

5, reducer

The data state indicates that the action is there so it’s implemented. Reducer is a reducer that controls state based on actions.

const calculate = (state: ReduxState = initData, action: Action ) = > {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}

export {calculate}
Copy the code

A new state is returned after the reducer operation, such as adding or subtracting state.num based on the action type.

6, store

A store is where data is stored for the entire project, and there can only be one. Create a store and reducer everything into it.

import { createStore, combineReducers } from "redux";
import { calculate } from "./calculate";

You can create multiple reducers together here
const rootReducers = combineReducers({calculate})
// Manage a store globally
export const store = createStore(rootReducers)
Copy the code

7, dispatch

store.dispatch(incrementAction);
Copy the code

By calling incrementAction from the store, the store data is modified directly.

practice

1. Create projects and add dependencies

• Create a project

  $ yarn create react-app redux-demo --typescript
  Copy the code

• Add the story

  $ yarn add redux react-redux @types/react-redux @types/redux
  Copy the code

• Add the routing

  $ npm install --save react-router-dom
  Copy the code

2. Core code

<! --pages/home/index.tsx-->import React, { Component } from 'react';
import './index.css'
import { incrementAction, reduceAction } from '.. /reducers/calculate';
import { connect } from 'react-redux'; <! -- Define the properties of Home --> interface Props {num: number,
    increment: () = >any,
    decrement: () = >any, } <! -- props for the Home -->const mapStateToProps = (state: any) = > {
    return {
      num: state.calculate.num
    };
  };
  
  const mapDispatchToProps = (dispatch: any) = > ({
    increment: () = > dispatch(incrementAction),
    decrement: () = >dispatch(reduceAction) }); <! Connect (mapStateToProps, mapDispatchToProps,)as any)
export default class Home extends Component<Props.any> {
    render() {
        return <div className='container'>
            <p onClick={this.props.increment}>click to increment num</p>
            <p onClick={this.props.decrement}>click to decrement num</p>
            <p>{this.props.num}</p>
        </div>}}Copy the code

A reducer can be added to a store (for example, here is a reducer with addition or reduction). You can also create other reducer operations by files, which is easy to manage by reducer. As long as the store is created using combineReducers all bound together.

<! Reducer reducer reducer reducer reducer reducer reducer reducerexport const INCREMENT = "INCREMENT"
export const REDUCE = "REDUCE"

export const incrementAction = {type: INCREMENT, count: 2}
export const reduceAction = {type: REDUCE, count: 1}

interface ReduxState {
    num: number
}

interface Action {
    type: string,
    count:  number,
}

const initData = {
    num: 0
}

const calculate = (state: ReduxState = initData, action: Action ) = > {
    switch (action.type) {
        case INCREMENT:
            return {num: state.num + action.count}
        case REDUCE:
            return {num: state.num - action.count}
        default:
            return state
    }
}

export {calculate}
Copy the code

The sample code

Yards cloud address