Redux是什么?
专注于状态管理的库,和react解耦,单一状态,单向数据流
核心概念:store, state, action, reducer
对Redux来说只有这三个要素:
a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。
b. reducer是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回。
c. store负责存储状态并可以被react api回调,发布action.
a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。
b. reducer是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回。
c. store负责存储状态并可以被react api回调,发布action.
摘自:Wang Namelos https://www.zhihu.com/question/41312576/answer/90782136
下面我们开始实战操作一下:完成一个加一减一的操作,state是数字,action.type是操作的类型,reducer完成具体操作,store用来存储state,发布action
首先,通过createStore来新建一个store,需要准备好reducer(我们的reducer例子 counter就是负责+1-1)
import {createStore} from 'redux'
// 1. 新建store
// 通过reducer建立
// 根据老的state和action 生成新的state
function counter(state=0 , action) {
switch (action.type){
case 'addition':
return state + 1;
case 'subtraction':
return state - 1;
default:
return 10;
}
}
// 新建store, 把准备好的reducer处理函数 传给createStore
const store = createStore(counter);
然后我们打印一下现在store里的state,
const init = store.getState();
console.log(init); // 10
接下来就可以派发事件,传递action,通过action的type来判断 命中reducer的哪个动作
// 派发事件 传递action
store.dispatch({type: 'addition'});
console.log(store.getState()); // 11
store.dispatch({type: 'addition'});
console.log(store.getState()); // 12
store.dispatch({type: 'subtraction'});
console.log(store.getState()); // 11
每次命中都要打印一次,很繁琐。我们可以添加个监听
function listener() {
const current = store.getState();
console.log(`现在的数字是${current}`);
}
// 订阅
store.subscribe(listener);
store.dispatch({type: 'addition'}); // 现在的数字是11
store.dispatch({type: 'addition'}); // 现在的数字是12
store.dispatch({type: 'subtraction'}); // 现在的数字是11
这样就不用每次都打console了。
redux的基础用法就是这样了,更高级的用法,在以后的文章中会分享给大家。