实战：redux的基本使用

redux数据流

整体流程

初始化工程

创建react
npm i create-react-app -g
create-react-app react-redux-demo

添加react-redux
npm i redux --save
npm i react-redux --save

工程目录结构：

• [容器组件]连接[展示组件]和[store]
• 展示组件《=》容器组件connect《=》store

编写store

// demo-react-redux/src/redux/actions/countAction.js
export const Add = {
   
    type:'add'
}

export const Sub  = {
   
    type:'sub'
}

// demo-react-redux/src/redux/reducers/counter.js
const initialState = {
   
    count: 0,
}
export default function counterReducer(state = initialState, action) {
   
    switch (action.type) {
   
        case 'add': return Object.assign({
   }, state, {
   
            count: state.count + 1
        });
        case 'sub': return Object.assign({
   }, state, {
   
            count: state.count - 1
        });
        default: return state;
    }
}

// demo-react-redux/src/redux/reducers/index.js
import {
    combineReducers } from 'redux' // 原生api 
import counter from './counter' // 自定义reducer
const reducers = combineReducers(