浅析Redux数据流

前端之家收集整理的这篇文章主要介绍了浅析Redux数据流前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原文地址:https://github.com/YutHelloWo...

-- React Redux 数据流

通过这张流程图,我们可以更好的理解Redux和React直接数据如何流通,关系如何映射。

让我们一步步来了解图中的各个概念。

action & actionCreator

action creator 就是函数而已,负责构建一个 action (是的,action creator 这个名字已经很明显了)并返回它。通过几行简单的代码就可以解释清楚了!

const actionCreator = function () {
  return {
    type : 'AN_ACTION'
  }
}

一般约定 action 是一个拥有 type 属性的对象。

console.log(actionCreator())
//  { type: 'AN_ACTION' }

reducer

Reducer 函数只是一个纯函数,它接收应用程序的当前状态以及发生的 action,然后返回修改后的新状态(或者有人称之为归并后的状态)。Reducer 函数是 action 的订阅者。

const reducer = function (state = {},action) {
  console.log('reducer was called with state',state,'and action',action);

  return state;
}

Store

以上,action描述“发生了什么”,而reducer根据action来更新state。但是他们两者之间是如何关联的呢?

不用担心,Redux 会帮你把action和reducer连接起来。

我们把 Redux实例称为 store 并用以下方式创建:

import { createStore } from 'redux'

const store_0 = createStore(() => {})

注意:在createStore时,需要给它传入一个 reducer 函数

每当一个action发生时,Redux都能调用这个函数。往 createStore 传 Reducer 的过程就是给 Redux绑定 action处理函数(也就是Reducer)的过程。

接下来,试着在 Reducer 中打印一些 log

const reducer = function (...args) {
  console.log('Reducer was called with args',args)
}

const store_1 = createStore(reducer)
// 输出:Reducer was called with args [ undefined,{ type: '@@redux/INIT' } ]

我们没有dispatch(分发)任何action,但是reducer被调用了!这是由于初始化应用state的时候,Redux dispatch 了一个初始化的 action ({ type: '@@redux/INIT' })。reducer的入参为(state,action)。state还没有被初始化,自然为undefined

如何读取store中的state?

Redux为我们提供了store.getState()方法

import { createStore } from 'redux'

const reducer_2 = function (state = {},action) {
  console.log('reducer_2 was called with state',action)

  return state;
}

const store_2 = createStore(reducer_2)
// 输出: reducer_2 was called with state {} and action { type: '@@redux/INIT' }

console.log('store_2 state after initialization:',store_2.getState())
// 输出: store_2 state after initialization: {}

如何dispatch action?

我们需要使用store.dispatch(action)方法

// 接以上代码
const anAction = {
  type : 'AN_ACTION'
}
store_2.dispatch(anAction);
// 输出:reducer_2 was called with state {} and action { type: 'AN_ACTION' }

combineReducers

combineReducer用于合并Reducers,并且合并对应的State。

const userReducer  = function (state = {},action) {
  console.log('userReducer was called with state',action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
const itemsReducer = function (state = [],action) {
  console.log('itemsReducer was called with state',action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
import { createStore,combineReducers } from 'redux'

const reducer = combineReducers({
  user  : userReducer,items : itemsReducer
})

// 输出:
// userReducer was called with state {} and action { type: '@@redux/INIT' }
// userReducer was called with state {} and action { type: '@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i' }
// itemsReducer was called with state [] and action { type: '@@redux/INIT' }
// itemsReducer was called with state [] and action { type: '@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i' }

var store_0 = createStore(reducer)

// 输出:
// userReducer was called with state {} and action { type: '@@redux/INIT' }
// itemsReducer was called with state [] and action { type: '@@redux/INIT' }

console.log('store_0 state after initialization:',store_0.getState())
// 输出:
// store_0 state after initialization: { user: {},items: [] }

回过头来看看文章开头的数据流向图

View组件通过click等事件,dispatch一个(actionCreator返回的)action,通过Store把当前状态state和action传递给订阅者reducer函数,reducer返回一个新的状态存储在Store中,Store又把新的State传递给View组件触发组件更新。

为了将Redux和React联系到一起。就需要用到React-Redux这个库。

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

简单来说,mapStateToProps和mapDispatchToProps就是分别把Redux的state,和dispatch(action)映射到React组件中作为props。connect将展示组件(presentationalComponent)封装成高阶的容器组件(containerComponent)。state的更新意味着props更新。

原文链接:https://www.f2er.com/react/303356.html

猜你在找的React相关文章