react中的redux的使用

action文件夹中的count.js

import { MODIFYCOUNT } from "../constant";
export const modifyCount=data=>({
    // 更新count的action
    type:MODIFYCOUNT,
    data
})

reducers文件夹中中的count.js

import  {  MODIFYCOUNT }from '../constant.js'
const initState={
    count:{
        add:1,//加
        sub:2,//减
    },
}

export default function CountInfo(preState=initState,action){
    const {type,data}=action;
    console.log(type,data)
    switch(type){
        case MODIFYCOUNT:
            //切换数据
            return {...preState,count:data}
        default:
            return preState
    }
}

reducers中的index.jsx

//引入combineReducers,用于汇总所有的reducer
import {combineReducers} from 'redux';
// 引入全局数据
import count_info from './count';
// 汇总所有的reducer
export default combineReducers({
    count_info,
})

constant文件夹中

用于定义action对象中type类型的常量值，发送action的时候，每个reducer都会接收到action,所以type必须唯一，否则会造成reducer意外触发
    export const MODIFYCOUNT='MODIFYCOUNT'

store文件夹中

//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux';
//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
// 暴露store
export default createStore(reducer,applyMiddleware(thunk))

项目中的具体使用

1.首先是引进redux
import { modifyCount } from "../../redux/actions/market.js";
//修改全局数据
 this.props.modifyCount({
        ...this.props.count,
        add:2
      });


export default connect(
  (state) => ({
    count: state.count_info.count
  }),
  { modifyCount  }
)(Count);