React ( redux 的使用流程及简单的案例 ,redux的数据划分使用,以及react-redux,react-thunk的使用)

redux

1. redux基础
2. redux中数据的划分（ reducer 划分）
3. redux中的中间件

组成部分

1. store 数据的管理者
2. view react的组件来充当
3. actionsCreators 动作的创建者， 用来发送一个 action ❥(^_-)
4. reducer 动作的触发者， 用来修改数据的 ，reducer是一个纯函数，它里面有一个返回值， 返回值是什么， 那么newState就是什么

redux的基础使用流程

得有一个工具 redux

1. 安装 redux
   $ yarn add redux
2. 创建一个共享的数据存储仓库 文件夹 store
   src
   store
   index.js
3. store的创建

    import {
    createStore } from 'redux'

    const store = createStore(reducer)

    export default store
 
    //  redux 中store身上的方法
    //     dispatch: ƒ dispatch(action)
    //     getState: ƒ getState()
    //     replaceReducer: ƒ replaceReducer(nextReducer)
     //     subscribe: ƒ subscribe(listener)
    //     Symbol(observable): ƒ observable()
     

4. 创建reducer.js 纯函数

    /* 
    reducer 是一个纯函数 ，函数接收两个参数，第一个参数是 previousState, 第二个参数是 action
   
    previousState = state 赋初始值时，会将地址浅拷贝给previousState,当previousState改变时，
    会影响state, 我们应该避免这种情况，所以我们要做一个深拷贝，我们使用最简单的形式就是：解构赋值
   
    那么我们就可以直接去管newState
    */
   

        import state from './state'
        import * as type from './type'
        const reducer = ( previousState = state, action ) => {
   


        var newState = {
   
            ...previousState
        }

        switch ( action.type ) {
   
            case type.ADD_TODOS:
                //修改数据的
                newState.todos.push({
   
                id: newState.todos.length + 1,
                text: action.payload
                })
            break;
        
            default:
            break;
        }

        console.log( newState )

        return  newState