redux明白store reducer action之间的关系

可参考 知乎大神Wang Namelos[https://www.zhihu.com/people/wang-namelos/activities]回答：https://www.zhihu.com/question/41312576?sort=created

正如回答所说，我们要先弄明白react需要什么，然后看redux如何管理react数据库：
简言之如回答所说：
a. 需要回调通知state (等同于回调参数) -> action
b. 需要根据回调处理 (等同于父级方法) -> reducer
c. 需要state (等同于总状态) -> store
具体可参考回答，里面已经说得很通俗易懂了，这里主要说下如何实际编写action、reducer、store：

在此之前先说下他们之间是怎么操作流通的：
1、当view需要发起行为时，需要在当前位置触发action，即store.dispatch(addNote())
2、当Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。而这种 State 的计算过程就叫做 Reducer。而Reducer方法是由store.dispatch方法触发来自动执行的。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux'; const store = createStore(reducer);
Reducer 是一个函数,且为纯函数，它接受 Action 和当前 State 作为参数，Reducer 函数里面不能改变 State，必须返回一个全新的state对象。
3、state更新，触发view发生改变，而在此之前必须把数据store和操作事件action绑定到需要使用的组件上，就需要用到connect函数（connect方法可参考这篇文章：https://yq.aliyun.com/articles/59428）：
意思是先接受两个参数（数据绑定mapStateToProps和事件绑定mapDispatchToProps），再接受一个参数（将要绑定的组件本身）:
export default connect(mapStateToProps,mapDispatchToProps)(App)
其中：
mapStateToProps 就是将state(补充：即store中的该组件需要的数据)作为props绑定到组件上
mapDispatchToProps是可选的，将 action 作为 props 绑定到组件上，如果不传这个参数redux会把dispatch作为属性注入给组件，可以手动当做store.dispatch使用
//mapDispatchToProps 为actions里面的函数绑定dispatch，可直接调用this.props.actions.xxx()，即等同于没绑定情况下this.props.dispatch(xxx())，不需要手动dispatch
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions, dispatch)
});
//mapStateToProps 可返回当前数组需要的几个state属性值
const mapStateToProps = state => {
return{
notes : state.notes
}
};
以上，便可以在组件内触发action，更新state，来更新view的变化

action: 指全局发布的动作指令，主要就是定义所有事件行为的，例如:
export const ADD_NOTE = “ADD_NOTE”;
export const DELETE_NOTE = “DELETE_NOTE”;

let nextTodoId=0;
export const addNote = (title,text) => ({
type: ADD_NOTE,
id: nextTodoId++,
title:title,
note: text
});
export const deleteNote = (id) => ({
type: DELETE_NOTE,
id: id
});

以上定义了两个action函数，分别是添加笔记和删除笔记，正如前面所说，mapDispatchToProps 将 action 作为 props 绑定到组件，可以直接在组件中调用触发dispatch，代码如下：

class App extends Component{
    constructor(props){
        super(props);
    }
    onAddNote(title,text){
        this.props.actions.addNote(title,text);
    }
    deleteNote(id){
        this.props.actions.deleteNote(id);
    }
    render(){
        return(
            <div className="container">
                <h1 className="header">记事本</h1>
                <NoteAdd onAddNote={(title,text)=>this.onAddNote(title,text)}/>
                <NoteList notes={this.props.notes} onDeleteNote={(id)=>this.deleteNote(id)}/>
            </div>
        );
    }
}

reducer: action指令发起会触发reducer对应函数执行，例如:
import { combineReducers } from “redux”;
import { INIT_NOTES, ADD_NOTE, DELETE_NOTE } from “…/actions”;

//处理笔记初始化、添加及删除请求
function notes(state = [ ], action){
    //每一次的操作无论是添加、删除还是初始化，全部的笔记内容会被重新更新一次
    switch(action.type){
        // case INIT_NOTES:
        //     return [ ...action.notes ];
        case ADD_NOTE:
            return [
                ...state,
                {
                    id: action.id,
                    title: action.title,
                    note: action.note
                }
            ];
        case DELETE_NOTE:
            var newState=[];
            state.map((note) =>{
                if(note.id != action.id){
                    newState.push(note);
                }
            });
            return newState;
        default:
            return state;
    }
}

const rootReducer = combineReducers({ notes });
export default rootReducer;

当发起this.props.actions.addNote(title,text)时,reducer会执行case ADD_NOTE：返回一个新的state对象，（原文：store监测到state更新便会重新加载更新部分虚拟dom，修正：store中的state更新，由于我们通过mapStateToProps将store中的state作为props传给组件，此时props发生变化，react 会重新渲染该组件，并更新部分虚拟dom），使页面更新；
其中 combineReducers是 Redux 提供的一个方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer，例如：

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

最后回到mapStateToProps
const mapStateToProps = state => {
    return{
        notes : state.notes
    }
};

这里的state，打印出来可以看到：其实即为reducer输出的notes对象：

{notes:[
  id:0
  note:" ddddd"
  title:"ddd"
]}

如果是多个reducer的合集，那就是输出的多个对象的合集：
{notes:[{
  id:0
  note:" ddddd"
  title:"ddd"
}]，
note:[{
  id:0
  note:" ddddd"
  title:"ddd"
}]
}

以上