关于redux:关于redux的一些学习笔记

41次阅读

共计 1644 个字符，预计需要花费 5 分钟才能阅读完成。

redux 是用于治理 react 状态的一个状态管理器

外围有三大部分组成 –action、reducer、store

action：是触发 state 扭转的状态，是一般的 js 对象，语义作用；

const addAction = {
    type: 'ADD_ITEM',
    text: 'to add a new item'
}

reducer：纯函数 传递 action 以触发 state 扭转的函数，传入 state 和 action，做一些合乎 action 的解决，创立 state 的正本，并返回这个正本。

function todoApp(state, action) {switch(action.type){
        case 'ADD_ITEM': 
        return Object.assign({},state,{
            ...state.todos,
            {text: action.text, completed: true}
        });
    }
}

store：存储 state 的中央。
办法：
getState(): 获取 state
dispatch(action): 更新 state
subscribe(listener): 注册监听器，返回一个函数，调用此函数可登记监听器。

创立 store：

import {createStore} from 'redux';
import rodoApp from './reducers';

let store = createStore(todoApp);

单向数据流 – 数据生命周期：
调用 store.dispath(action)；
redux store 会主动调用传入的 reducer 函数；
根 reducer 会把多个子 reducer 输入合并成一个繁多的 reducer 树；
redux store 保留根 reducer 返回的残缺 state 树，该 state 树就是下一个 state，所有调用 store.subscribe(listener) 的监听器都将被调用，在监听器中能够通过调用 store.getState() 来获取以后的 state。

配合 react（redux 自身和 react 没有关系）
装置 react 绑定库：
npm install --save react-redux
其基于 react 的容器组件与 UI 组件相拆散的思维来开发。

	UI 组件	Container 组件
是否间接应用 Redux	否	是
数据起源	props	监听 redux state
数据批改	从 props 调用回调函数	向 redux 派发 action
调用形式	手动	通常由 react redux 生成
作用	展现骨架、款式	数据获取、状态更新

容器组件用 connect() 办法生成。【该办法外部做了一些性能优化，防止了很多不必要的 rerender】
其本质是通过 store.subscribe() 从redux state树中读取局部数据，并通过 props 将这些数据传给对应的 UI 组件。

connect()的用法

import {connect} from 'react-redux'；connect(mapStateToProps, mapDispathToProps)(TodoList)；const getVisibleTodos = (todos, filter) => {switch(filter) {
        case 'SHOW_COMPLETED':
        return todos.filter(...)
        // ...
    }
}
const mapStateToProps = state => {
  return {todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispathToProps = dispatch => {
    return {
        onTodoClick: id => {dispatch(toggleTodo(id))
        }
    }
}

mapStateToProps: 该函数用于指定如何将以后的 redux store 的 state 映射到对应 UI 组件的 props 中。
mapDispathToProps：该函数接管 dispatch() 办法并返回冀望注入到 UI 组件 props 中的回调函数。

正文完