redux

流程：

React Component(借书者) ->ActionCreaturs(图书管理员)->Store(图书馆大厅)->Reducers(图书管理软件找到图书在图书馆的位置)>Store->React Components

List:

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/index.js';

class TodoList extends Component { 
    constructor(props){
        super(props);
        console.log(store.getState());
        this.state=store.getState();
        this.changInputValue=this.changInputValue.bind(this);
        this.storeChange = this.storeChange.bind(this);
        this.addList = this.addList.bind(this);
        store.subscribe(this.storeChange);//如果reducer里的值改变了就调用storeChange方法
    }

    changInputValue(e) {
        const action={
            type:'changeInput',
            value:e.target.value
        }
        store.dispatch(action);
    }

    storeChange() {
        this.setState(store.getState());
    }

    addList() {
        const action={
            type:'addItem'
        }
        store.dispatch(action);
    }

    delItem(index) {
        const action={
            type:'delItem',
            index
        }
        store.dispatch(action);
    }

    render() { 
        return (
            <div style={{margin:'10px'}}>
                <div>
                    <Input 
                        placeholder={this.state.inputValue} 
                        style={{width:'250px',marginRight:'10px'}}
                        onChange={this.changInputValue}
                        value={this.state.inputValue}
                    />
                    <Button type='primary' onClick={this.addList}>增加</Button>
                </div>
                <div style={{margin:'10px',width:'300px'}}>
                    <List 
                        bordered 
                        dataSource={this.state.list} 
                        renderItem={(item,index)=>(<List.Item onClick={this.delItem.bind(this,index)}>{item}</List.Item>)} 
                    />
                </div>
            </div>
        );
    }
}
 
export default TodoList;

subscribe的作用：

1、使用函数createStore创建store数据点

2、创建Reducer。它要改变的组件，它获取state和action，生成新的state

3、用subscribe监听每次修改情况

4、dispatch执行，reducer(currentState,action)处理当前dispatch后的传入的action.type并返回给currentState处理后的state，通过currentListeners.forEach(v=>v())执行监听函数，并最后返回当前 action状态。

在react里面用redux，一般我们会用到react-redux，其中包括Provider和connect接口

Provider接收redux的createStore()的结果，并且放到context里，让子组件可以通过context属性直接获取到这个
createStore的结果，这个createStore的结果是啥呢，如下几个函数:

return {
        //真正的返回，执行createStore其实返回的就是这些东东
        dispatch,       //触发action去执行reducer，更新state
        subscribe,     //订阅state改变，state改变时会执行subscribe的参数（自己定义的一个函数）
        getState,      //获取state树
        replaceReducer,       //替换reducer
 }

而connect，接收到mapStateToProps，会在内部subscribe全局state的改变，来判断props是否更改，如果需要更新，才触发更新。

react-redux就是不需要你自己去subscribe全局state的变化，以及去getState，还有判断组件是否需要更新。

store:

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store;

reducer:

const defaultState = {
    inputValue:'Write Something',
    list:[
        '睡觉',
        '游泳',
        '打游戏'
    ]
}
export default (state=defaultState,action)=>{
    //redux里只能接受state，不能改变state
    if (action.type === 'changeInput') {
        let newState = JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        return newState;
    }

    if (action.type === 'addItem') {
        let newState = JSON.parse(JSON.stringify(state));
        if ('' !== newState.inputValue) {
            newState.list.push(newState.inputValue);
        } else {
            return newState;
        }
        newState.inputValue = '';
        return newState;
    }

    if (action.type === 'delItem') {
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState;
    }

    return state;
}