React学习笔记-Redux

Redux

首先,先双手献上经典的 Redux Flow图然后我们再娓娓道来~

React主要就是用来实现UI界面的,是一个专注于view层的框架。对于一些小项目,如果数据的交互不是很多,完全可以只使用React就能很好的实现。但是如果比较复杂,只使用React的state来存储状态就容易造成数据的冗余和重复,于是我们可以用Redux来帮忙。Redux是一种架构模式,是由flux发展而来的

Redux三大原则

  • 唯一数据源
  • 状态只读
  • 数据改变只能通过纯函数(reducer)完成

接着:我们来解读一下那个Redux Flow图

基本的概念

Store

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。Redux 提供createStore(reducer, defaultState)这个函数来生成 Store,生成三个方法getState(),dispatch(),subscrible()。

  • getState():存储的数据,状态树;当前时刻的 State,可以通过store.getState()拿到。
  • dispatch(action):分发action,并返回一个action,这是唯一能改变store中数据的方式;
  • subscrible(listener):注册一个监听者,store发生变化的时候被调用。

Action

State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。Action是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。Action 描述当前发生的事情。改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。

store.dispatch()

View通过store.dispatch()发出action,store.dispatch接受一个 Action 对象作为参数,将它发送出去。

reducer

Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。但是 Store 只是一个“仓库”,它不晓得给什么数据到 View,所以只能交给 reducer,这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State,reducer(previousState,action)

1
2
3
4
const reducer = function (state, action) {
// ...
return new_state;
};

总结

  • 首先,用户发出 Action;
1
store.dispatch(action);
  • 然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
1
let nextState = todoApp(previousState, action);
  • State 一旦有变化,Store 就会调用监听函数。
1
2
// 设置监听函数
store.subscribe(listener);
  • listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。
1
2
3
4
function listerner() {
let newState = store.getState();
component.setState(newState);
}

参考【非常感谢!】:
阮一峰redux入门教程
对React、Redux、React-Redux详细剖析