个人博客

A web front-end programmer's personal blog.

关于redux的一些理解

redux

redux 简单理解是生成一个状态机,一个web 应用就是一个状态机,所有状态保存在一个对象里,redux生成的store就是这个对象

redux的createStore 生成的 store 对象有三个方法

  • store.getState()
  • store.dispatch()
  • store.subscribe()

createStore 接受的第一个参数是一个reducer, reducer函数接受两个参数 state和action, reducer是一个纯函数,接受一个state对象和action, 生成一个新的state

createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。

用户通过 store.dispatch(action), 传入action 来 触发视图更新,store.dispatch 内部会自动触发 store.subscribe(fn)(传入函数,该函数是监听state变化时要执行的函数)

createStore内部实现原理

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

  dispatch({});

  return { getState, dispatch, subscribe };
};

redux-thunk

redux 的 store.dispath 通常是接受一个action 对象,使用 redux-thunk 中间件可以对 store.dispath 进行改造使其可以接受一个函数作为参数,而该函数本质是一个action的生成器,可以在该函数里做异步操作,以primse为例,先pedding(触发action),等异步结束后,根据结果 resolve 或 reject ,生成相应的触发 action,因此异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator(该函数接受两个参数,dispath 和 getState),然后使用redux-thunk中间件改造store.dispatch。

redux-promise

redux-thunk 是让 store.dispath 接受一个 Action Creator 的函数,而 redux-promise 则是返回一个 promise 对象,即 使得store.dispatch方法可以接受 Promise 对象作为参数。

react-redux

React-Redux 将所有组件分成两大类:UI 组件 和 容器组件。 UI组件只负责展示,是个纯组件,只接受props参数,没有state状态。 容器组件恰恰相反,使用rudux 主要负责数据管理和逻辑

react-redux 提供的 connect 方法就是讲UI组件包装成容器组件,connect 接受两个参数 mapStateToProps 和 mapDispatchToProps,返回一个新的函数,该新函数接受 UI组件为参数,最终生成一个容器组件,代码如下:

import { connect } from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
mapStateToProps

mapStateToProps是一个函数,接受state作为参数(还可以使用第二个参数,代表容器组件的props对象),最终返回一个对象,里面的键值对就是一个映射。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。 mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。

mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。该参数可以是一个函数也可以是一个对象。

如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

如果mapDispatchToProps是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}
Provider

connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成 UI 组件的参数。为了避免从父组件向子组件一级一级传递state,React-Redux 提供Provider组件,它的原理是React组件的context属性

(实例代码)[https://github.com/jackielii/simplest-redux-example/blob/master/index.js]

相关文章