回顾总结React-Redux——给当年初次了解Redux的自己

2019-10-14 本文已影响0人虚拟J

初次了解Redux的时候，看Redux中文文档有点懵。到之后看的书多了后，重新回顾文档感觉很简单，只是当初思路没有理顺，现在重新整理一下————给当年初次了解Redux的自己

如果你不知道是否需要 Redux，那就是不需要它。只有遇到 React 实在解决不了的问题，你才需要 Redux 。

一.Flux架构：

Flux是由Facebook开发的用于React应用程序数据流的架构模式。FLux的主旨是单向数据流，消除MVC类似模式的复杂性。

Flux架构使数据单向流向（从数据储存到视图），从而简化了数据流

单向数据流可以更好地进行测试和调试。

二.Redux：

2015年，Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性，是Flux架构最流行的实现之一——JavaScript应用程序的可预测状态容器。

Redux的核心概念是：数据state不能随意修改，唯一改变state的方法是必须发起一个action（一个描述发生了什么事的对象），声明描述所要进行的变化（这样子的好处是可以清晰地知道应用中到底发生了什么）。reducer 只是一个接收先前 state 和 action，并返回新 state 的一个纯函数。

reducer保持纯净非常重要，永远不要在 reducer 里做这些操作：
1.修改传入参数。
2.执行有副作用的操作，如 API 请求和路由跳转。
3.调用非纯函数，如 Date.now() 或 Math.random()。

import { reducers1} from 'reducers1'
import { combineReducers } from 'redux'
const reducers = combineReducers({
      reducers1,
    // more reducers
})
export default reducers

随着应用的膨胀，可以将reducer 拆分放到不同的文件中, 以保持其独立性并用于专门处理不同的数据域。用combineReducers辅助函数，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore 方法。( 注意每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。)

下面关键点再理一下：

action只是描述了“发生了什么”（且是数据的唯一来源），但并没有描述应用如何更新 state的一个对象。
reducers根据actions返回一个新的state的一个纯函数。
Store就是把它们联系到一起的对象。

import { createStore } from 'redux'

const action= {
  type : ADD_DATA  , 
  data : 'Add a data'
}

function reducers ( state={}, action ) {
    switch (action.type) {
      case ADD_DATA:
        return { ...state, data:action.data}
      default:
        return state
     }
}

const store= createStore(reducers)；
// dispatch 一个 action 到 Store
store.dispatch( action )

三.React-Redux

React-Redux 是 Redux官方提供的 React 绑定库。提醒一下：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

下面React应用中使用Redux时涉及的一些主要模块：

createStore()函数：创建一个数据存储，里面存储了所有的数据并提供方法来操作这些数据。
Provider组件：它使任何组件都可以从数据存储中获取数据。
connect函数：可以用来封装任何组件，并可以将应用的部分状态从数据存储映射到组件的数据。

启用Redux：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from'react-redux'
import { createStore } from'redux'
import reducers from './reducers'
import App from './components/App'

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

<Provider>作为顶层组件意味着所有的子节点都可以访问数据存储。里面大概用到了React 的一个api：Context。Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

将数据连接到数据存储：

Provider有将数据带入组件的功能，但要访问数据，需要明确地将组件连接到数据存储。使用connect()，记住state是connect()的第一个参数。

import { connect } from 'react-redux'

export default const APP= connect (
    ( state ) =>({ ...state }),
  ) (APP)

connect是一个高阶组件（HOC），是将组件转换为另一个组件，是 React 中用于复用组件逻辑的一种技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。

分发操作：

要修改数据存储中的数据，需要分发操作。一旦将组件连接到数据存储，就可以收到已经映射到某些应用状态的属性，而且还会收到dispatch属性。

//在你需要的事件中触发就好了
this.props.dispatch({
    type : ADD_DATA  ,
    data :  'Add a data'
})

也可以使用connect()函数的第二个参数作为方法传递,通过属性来引用，这样就不必使用dispatch( )来传递操作。

上面的目前只是同步操作，每当 dispatch action 时，state 会被立即更新。那Redux 究竟是如何处理异步数据流的呢？——Redux 中间件redux-sagas（正在梳理中）