在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';// 引入actionimport { 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);