react-redux的使用

redux管理状态环境搭建

依赖：
npm install redux react-redux redux-thunk redux-devtools-extension

store.js

import { createStore, applyMiddleWare } from 'redux';
import thunk from 'redux-thunk';  //用来实现redux异步的中间插件
import { composeWithDevTools } from 'redux-devtools-extension'  //浏览器中redux的扩展工具调试
import reducer from './reducer';

export default createStore( reducer, composeWithDevTools(applyMiddleWare(thunk)));

reducer.js

import { combineReducers } from 'redux';

function count(state = 1, action) {
    switch (action.type) {
        case 'increment':
        return state + action.data;
        default: 
        return state;
    }
}

// combineReducers 函数：接收包涵所有reducer函数的对象，返回一个新的reducer函数
export default  combineReducers ({
   count
})

actions.js

//同步的action
export const increment = number => ({ type: 'increment ', data: number});

//异步的action
export const incrementAsync = number => {
    return dispath => {
       // 1.执行异步（定时器，ajax请求，promise） 
      setTimeOut( () => {
          // 2.当前异步任务执行完成时，分发一个同步action
         dispath(increment(number));
      },1000)
   }
}

详情图

微信图片_20200803145547.png