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({<