基本概念和API

1 . store: 保存数据的地方，可以把它当作一个容器，整个应用只能有一个store，Redux提供了createStore函数来生成store。

import { createStore } from 'redux';
const store = createStore(fn);

2 . state: store对象包含了所有数据，如果想要得到某个时点的数据，就要对store生成快照。这个时点的数据集合就叫做 state，当前时刻的state可以通过store.getState()拿到。

const state = store.getState();
//Redux规定：1个state对应一个view，只要state相同，view就相同，你知道了state就相当于知道了view是怎么样的了

3 . Action: 会导致view的变化，但是用户接触不到state，只能接触到view，所以state的变化必须是view导致的。action就是view发出通知，表示state应该发生变化了。Action是一个对象。其中的type属性是必须的，表示Action的名称，其他属性可以自由设置，比如

const action = {
    type: 'ADD_TODO',
    playload: 'Learn Redux'
}

4 . Action Creator: View层有多少种消息，就会有多少种Action，可以用一个函数来生成Action，这个函数就是Action Creator

const ADD_TODO = '添加 TODO';
function addTodo(text){
    return {
        type: ADD_TODO,
        text
    }
}

const action = addTodo("learn Redux");

5 . store.dispatch: 是view发出Action的唯一方法。中间件就是在这个阶段使用

impot { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
    type: "ADD_TODO",
    payload: "learn Redux"
})

6 . reducer: store接受到Action以后，必须给出一个新的state，这样view才能发生变化，这种state的计算过程就叫做Reducer，它是一个纯函数，接受Action和当前state作为参数，返回一个新的state

const renucer = function(state,action){
    return new_state;
}

//案例
const defaultState = 0;
const reducer = (state = defaultState,action) => {
    switch (action.type){
        case: 'ADD'
            return state + action.payload;
        default:
            return state;
    }
}

const state = redicer(1,{
    type: 'ADD',
    payload: 2
})

7 . store.subscript(callback) 这个方法用于设置监听函数，一旦state发生变化，就会自动执行这个函数，只要是view的更新函数（react项目就是render或者setState方法放入listen），就能实现view层的 自动渲染。

let unsubscript = store.subscribe(() => 
    console.log(store.getState());
)

unsubscript();

8 . mapStateToProps:这个方法就是把接受到的state转换为props,一般只用第一个参数state

const mapStateToProps = (state) => {
    return {
        value: state.xx
    }
}

9 . mapDispatchToProps:这个是把接受到的动作转换为props

const mapDispatchToProps = (dispatch) => {
    return {
        onReast: () => {
            //一堆自己要写的逻辑
            dispatch(action)
        }
    }
}

store的方法

store.getState();
store.dispatch();
store.subscribe();

redux提供了combineReducers方法，用于reducer的拆分。

坑点：

1.如果用combineReducers的时候一定要注意要同步修改reducer里面的switch里面的内容，要不然会造成访问不到。

2.自定义mapDispatchToProps的时候注意return的时候一定要带回dispatch，要不然this.props里面就找不到dispatch了

const mapDispatchToProps=(dispatch)=>{
    return {
        onAdd:()=>{
            console.log("1");
            dispatch(action);
        },
        dispatch
    }
}

完整的案例：

https://github.com/mcfly001/my-redux/tree/master