react和redux之间的关系

前提警示：react、redux之间没有本质关系，redux可以结合其他库使用。redux数据管理方式跟react的数据驱动视图理念很合拍,一起使用，开发更加的便利高效

适用场景

• 小型项目 react 数据管理props state即可满足需求
• 组件嵌套共享数据 中间件redux

redux 中的store

• 存放一个数据对象
• 外界能访问到这个数据
• 外界也能修改这个数据
• 当数据有变化的时候，通知对应组件修改状态

store的工作流程

• What：想干什么 --- dispatch(action)
• How：怎么干，干的结果 --- reducer(oldState, action) => newState
• Then?：重新执行订阅函数（比如重新渲染UI等）
• 这样就实现了一个store，提供一个数据存储中心，可以供外部访问、修改等，这就是Redux的主要思想。。

redux 使用流程

• 下载 npm i redux -S
• src新建store文件夹，并新建子文件index.js / reducer.js

    // index.js  入口文件创建store实例
    import {createStore} from 'redux'
    import reducer from './reducer.js'
    const store = createStore(reducer);
    export default store;
    // reducer.js  处理数据
    const defaultState={
        carList:[]
    }
    export default (state=defaultState, action)=>{
        // 拷贝数据 修改数据 返回数据
        const newState = JSON.parse(JSON.stringify(state))
        if(action.type == 'add_car_item'){
            newState.carList.push(action.data);
            return newState;
        }
        return state;
    }

• 页面中需要访问store引入

   import store from '../store/index'

• 需要修改数据的文件 定义action（类型，值）store触发 store.dispatch(action)
• 从store中取值

    import store from '../store/index'
    export default class Car extends Component {
        constructor(props){
            super(props)
            this.state = store.getState();
            // 监听store数据变化
            this.watch = store.subscribe(this.changeState.bind(this))
        }
        render() {
            return (
                <div>
                    我是购物车页
                </div>
            )
        }
        changeState(){
            this.setState(store.getState())
        }
        componentWillUnmount(){   
            this.watch();   // 取消监听  防止内存泄漏
        }
    }

注：redux中的store 仅支持同步数据流。如需使store支持异步数据流，则需借助redux-thunk等中间件。