十分钟理解Redux核心思想，过目不忘。

leoperfect 发布于2019-08-22 18:28 / 1988人阅读

摘要：数据流简单介绍，比较简洁，请牢记于心。有时候可以使用生成器来批量生产相似对象，如我需要根据不同的来生成高度相似的附加的信息说明虽然上面数据流提到，通过处理生成后才能够更改信息。

白话Redux工作原理。浅显易懂。 
如有纰漏或疑问，欢迎交流。

Redux 约法三章 唯一数据源(state)

虽然redux中的state与react没有联系，但可以简单理解为react组件中的this.state。
html文档只是state的一种表现形式。所有html的数据应该都是直接或间接来自于state，否则UI视图是无法因state改变而更新的。

数据源(state)只读

不应该直接修改state数据。
对于数组使用：

Array.prototype.slice()//对数组进行拷贝
//使用ES6： 
[...state, ...newState]

对于对象使用：

Object.assign({}, state, change1, change2...)//对对象进行拷贝
//使用ES6:
{...state, ...newState}

通过纯函数(pure function)改变数据源(state)

pure function: 无其他API（包括Math, Date等）调用，无异步操作，preState => newState。

Redux数据流

简单介绍store/reducer/action，比较简洁，请牢记于心。

store
UI唯一数据来源，可以理解为react中的state，store信息的变化会触发视图更新.

action
对象。必须拥有type属性,用来描述发生什么。可选择携带发生时的数据，如用户输入的input value。切记：仅仅用来表述发生了什么。

reducer
pure function（上面有解释）。根据action.type来做出反应，(preState, action) => newState，生成的state是用来改变store的。

所以，data flow（数据流）:

UI发出动作，如click, submit;

action, 描述发生了什么;

reducer处理发生的事情，生成新state;

store被更新；

UI响应store更新

...

Redux action

举几个例子，可能会比较直观：

{
  type: “TOGGLE_TODO”, //这个type属性必须要，必须是字符串
  index: 5 //附加信息，自己根据需要选择是否加入
}；
{
  type: “ADD_TODO”,
  text：“学习Redux” //附加信息，这里是input value
}

没别的，就是这么简单。
有时候可以使用action生成器(action creators)来批量生产相似action对象，如：

//我需要根据不同的input value来生成高度相似的action:
function (text) {
  return {
    type: "ADD_TODO",
    text: text //附加的信息
  }
}

说明
虽然上面数据流提到，action通过reducer处理生成newState后才能够更改store信息。但是为了更好的语义编程，Redux通过语句store.dispatch(action)来更新store，reducer对action的处理在内部处理。

Redux reducer

很简单

(theState, action) => (newState);
//仅仅只是根据action.type处理一下需要更新的state

来看一个相对完整的reducer:

function todoApp(state = initialState, action) { //注意需要处理undefined情况下的state默认值
  switch (action.type) {  //根据action.type来判断
    case "SET_VISIBILITY_FILTER":
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case “ADD_TODO”:  //处理“ADD_TODO”的action type
      //返回新state(newState),注意不要直接改变state，对象使用了
      //Object.assign()。也可以使用ES的...操作符
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    case “TOGGLE_TODO”:  //处理“TOGGLE_TODO”的action type
      return Object.assign({}, state, {
        todos: state.todos.map((todo, index) => {
          if (index === action.index) {
            return Object.assign({}, todo, {
              completed: !todo.completed
            })
          }
          return todo
        })
      })
    default:
      return state
  }
}

Redux store

store
UI视图唯一数据来源（直接或间接），可以获取state，更新state，监听state变化，取消监听。所以store提供了一下方法：

store.getState() 获取当前state

store.dispatch(action) 更新state

store.subscribe(listener) store更新后回调listener，回调函数里面可以调用store.getStore()来获取更新后得state哟~

取消listener的方式比较特别：再调用一次store.subscribe(sameListner)

ps: 如有纰漏或疑问，欢迎交流。
先写这么多，有时间继续更新。

GPU云服务器云服务器不忘 Redux redux源码 redux-saga

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95886.html

十分钟理解Redux核心思想，过目不忘。

摘要：数据流简单介绍，比较简洁，请牢记于心。有时候可以使用生成器来批量生产相似对象，如我需要根据不同的来生成高度相似的附加的信息说明虽然上面数据流提到，通过处理生成后才能够更改信息。白话Redux工作原理。浅显易懂。如有纰漏或疑问，欢迎交流。 Redux 约法三章唯一数据源(state) 虽然redux中的state与react没有联系，但可以简单理解为react组件中的this.st...

xuexiangjys 2019-08-02 10:50 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

imingyu 2019-08-20 14:22 评论0 收藏0