Redux基础概览

Redux是什么？

专注于状态管理的库，和react解耦，单一状态，单向数据流

核心概念：store， state， action， reducer

对Redux来说只有这三个要素：
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的基础用法就是这样了，更高级的用法，在以后的文章中会分享给大家。

Redux是什么？

猜你喜欢