1、原理
安装:npm install redux
2、文件格式
.src下建立:
-redux
-store.js
-count_reducer.js
-count_action.js
3、store.js
/* 该文件专门用于暴露一个store对象,整个应用只有一个store对象 */ //引入createStore,专门用于创建redux中最为核心的store对象 import {createStore,applyMiddleware,combineReducers} from 'redux' //引入为Count组件服务的reducer import countReducer from './reducers/count' //引入为Count组件服务的reducer import personReducer from './reducers/person' //引入redux-thunk,用于支持异步action import thunk from 'redux-thunk' //汇总所有的reducer变为一个总的reducer const allReducer = combineReducers({ he:countReducer, rens:personReducer }) //暴露store export default createStore(allReducer,applyMiddleware(thunk))
4、reducers
reducer函数
接到两个参数,分别为:之前的状态(preState),动作对象(action)
针对传进来的不同的action对象的状态,对之前的prestate状态进行不同的操作
(注意:这里的操作必须是纯函数,不可改变之前的值,不可用unshift push或者random,Date等函数)
5、 actions
//同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
引入thunk:npm install redux-thunk
6、组件里面使用store的参数
如果store里面右多个数据比如2里面写的he和rens,那这里获得对应的就是store.he和store.rens
但是这个时候组件不会得到更新,如果要更新还需要使用store.subscribe组件
(一般把订阅写在最外层,这样App里面只要store发生变化都会更新)
参考链接: