Use mode of react Redux (I)

Time:2021-7-27

Basic usage of Redux in react projects

The document is mainly divided into four parts

Type file

The existence of this file is not necessary in the project, but to facilitate maintenance in large projects and separate various types.

/**File example*/
export const USER_NAME = 'USER_NAME';
export const USER_CODE = 'USER_CODE';

Reducer file

Reducer is a function that receives action and current state as parameters and updates the value of state with the type in action

/**File example*/
import { USER_NAME, USER_CODE } from '../type/module1';

const userInfo = {
    Username: 'ma Yun',
    userCode: 'my',
};

export function USER_INFO(state = userInfo, action) {
    switch (action.type) {
        case USER_NAME:
            return Object.assign({}, state, { userName: action.name });
        case USER_CODE:
            return Object.assign({}, state, { userCode: action.code });
        default:
            return state;
    }
}

Action file

Action is the only way to change state. Action is an object in which type is required and other parameters can be set freely (in most cases, these parameters are the values required to update state)

/**File example*/
export const USER_CODE_ACTION = (code) => {
    return {
        type: 'USER_CODE',
        code,
    }
};

export const USER_NAME_ACTION = (name) => {
    return {
        type: 'USER_NAME',
        name,
    }
};

Entry file

The key point in the entry file is the auxiliary function combinereducers, which can combine multiple reducers into the final reducer. In subsequent use, you can call createstore on this reducer

/**File example*/
import { combineReducers } from 'redux';
import reducer from './reducer';

const store = combineReducers({
    ...reducer
});
export default store;

The following is how to use in components

Create a store in the root component

import state from './redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
const store = createStore(state); 

function App() {
    return (
        <Provider store={store}>
            <div className="App">
                <ComOne/>
                <ComTwo/>
            </div>
        </Provider>
    );
}

How to use in components

import { connect } from 'react-redux';
//Introduce action
import { USER_CODE_ACTION } from '../../redux/action/module1';

function ComOne(props) {
    const [ count, setCount ] = useState(0);
    return (
        <div className="ComOne">
            <div>{props.userCode}</div>
            <Button type='primary' onClick={ ()=>{props.USER_ CODE_ Action (math. Random())} > submit < / button >
        </div>
    );
}

//Mapstatetoprops method: synthesize the variables in state into the props of the component
const mapStateToProps = (state) => { 
    return { 
        userCode: state.USER_INFO.userCode
    }
};
//Mapdispatchtoprops method: synthesize the action into the props of the component. In the component, you can directly props. User_ CODE_ Action()
const mapDispatchToProps = {
    USER_CODE_ACTION 
};
/** 
* connect api
*First of all, the reason why connect is successful is that the provider component wraps a layer on the original application component, making the original entire application a sub component of the provider, which really connects Redux and react
*/
export default connect(mapStateToProps, mapDispatchToProps)(ComOne);