react redux react-redux使用方式

Posted 2021-09-14 闲人

在react的项目中使用redux的基本用法

文件主要分四部分

• type
• reducer
• action
• 入口index

type文件

项目中不是必须有这个文件的存在，只是为了在大型项目中利于维护将各种type独立出来。

/** 文件示例*/
export const USER_NAME = \'USER_NAME\';
export const USER_CODE = \'USER_CODE\';

reducer文件

reducer是一个函数，接收action和当前state作为参数，配合action中的type对state的值进行更新

/** 文件示例*/
import { USER_NAME, USER_CODE } from \'../type/module1\';

const userInfo = {
    userName: \'马云\',
    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文件

action是改变state的唯一办法，action是一个对象其中type是必须的，其它参数可以自由设置（多数情况下这些参数就是更新state所需要的值）

/** 文件示例*/
export const USER_CODE_ACTION = (code) => {
    return {
        type: \'USER_CODE\',
        code,
    }
};

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

入口文件

入口文件中重点是combineReducers这个辅助函数，他可以将多个reducer合并成最终的reducer，后续使用时可以对这个reducer调用createStore

/** 文件示例*/
import { combineReducers } from \'redux\';
import reducer from \'./reducer\';

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

下面是在组件中如何使用

在根组件中创建store

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>
    );
}

在组件中如何使用

import { connect } from \'react-redux\';
// 引入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())}}>提交</Button>
        </div>
    );
}

// mapStateToProps方法：将state中的变量合成到组件的props中
const mapStateToProps = (state) => { 
    return { 
        userCode: state.USER_INFO.userCode
    }
};
// mapDispatchToProps方法：将action合成到组件的props中，在组件中可以直接props.USER_CODE_ACTION()进行调用
const mapDispatchToProps = {
    USER_CODE_ACTION 
};
/** 
* connect api
* 首先connect之所以会成功，是因为Provider组件, 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件,它真正连接 Redux 和 React
*/
export default connect(mapStateToProps, mapDispatchToProps)(ComOne);