初识 react-redux

一、数据流，react-redux是什么？为什么使用react-redux？
数据流是什么？
行为与响应的抽象

为什么使用数据流？
帮助我们明确了解行为与对应的响应

react与数据流的关系？
react是纯V框架，需要数据流支撑

为什么使用redux?
官方绑定的单项数据流Flux比较重

redux比较简单，单一状态树

非常小，压缩后大概只有2K

单项数据流？
传统MVC Model和View可以互相影响，导致数据混乱

单数据流store 向view传输，操作View更新，在有用户发出新的指令分发到Displatcher上

二、React-Redux的用法
action – 行为的抽象
需要一个固定的type，且唯一
是一个js对象，一般由方法生成

const addTodo = (text)=>{
        renturn {
            type:'ADD_TODO',
            id:nextTodoId ++,
            text
        }
   }

reducer – 是响应的抽象
是纯方法
返回新状态
返回一个新对象，不修改当前state
state 当前的stage
根据传入action的type决定怎么做

const  todos = (state=[],action) => {

    switch(action.type){

        case ADD_TODO :

            return [

                ...state,{

                    text:action.text,

                    completed:false

                }

            ]

        case COMPLETE_TODO :

            let arr = [];

            state.map((item,i)=>{

                if (i == action.index) {

                    item.completed = !item.completed

                };

                arr.push(item)

            })

            return arr

        default :

            return state

    }

}

store – 是state和reducer的混合体、所有数据和状态的存储
action 做用于 store
reducer 根据 store响应
state 可预测
store是唯一的
由 createStore 方法生成

import {createStore} from 'redux';

import rootReducer from './reducer/index';



const store = createStore(rootReducer);

Provider – 让容器组件拿到state

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

combineReducers – 合并多个Reducer
需要特别注意，使用combineReducers来合并reducer，需要子reducer的名字跟对应要接收的state的key一致

import { combineReducers } from 'redux';



const chatReducer = combineReducers({

  chatLog,

  statusMessage,

  userName

})



export default todoApp;
 

如果不同名，就要采用下面的写法。

const reducer = combineReducers({

  a: doSomethingWithA,

  b: processB,

  c: c

})



// 等同于

function reducer(state = {}, action) {

  return {

    a: doSomethingWithA(state.a, action),

    b: processB(state.b, action),

    c: c(state.c, action)

  }

}

connent – 用于从 UI 组件生成容器组件
mapStateToProps 负责输入逻辑，即将state映射到 UI 组件的参数（props）
负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
TodoList UI组件

const VisibleTodoList = connect(

  mapStateToProps,

  mapDispatchToProps

)(TodoList)

mapStateToProps() – 把状态绑定到组件的属性当中。
第二个参数，代表容器组件的props对象 这个是一个传递给 所有属性的对象。

const mapStateToProps = (state) => {

  return {

    todos: getVisibleTodos(state.todos, state.visibilityFilter)

  }

}

mapDispatchToProps() – 用来建立 UI 组件的参数到store.dispatch方法的映射
是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数

const mapDispatchToProps = {

  onClick: (filter) => {

    type: 'SET_VISIBILITY_FILTER',

    filter: filter

  };

}

dispatch – 是 View 发出 Action 的唯一方法。

function mapDispatchToProps(dispatch){
    return {
        changeName(name){
            dispatch({
                type:'ADD_NAME',
                name
            })
        }
    }
}