Redux学习讲解

Redux学习讲解

大神地址：从0到1实现一个Redux

借鉴地址：官网地址

react全家桶包括react、webpack、react-router、redux、redux-saga等，本文主要讲解react全家桶之redux，我接触比较多的是dva框架，个人感觉dva为开发web提供了极大的便利，antd的使用使开发web变得非常简单。当然，dva中继承了很多，其中就包括redux,本文主要将redux原理和从零到1实现一个redux。

Redux介绍

借鉴官网说明：Redux 是 JavaScript 状态容器，提供可预测化的状态管理，官网地址：点此跳转官网

个人理解

redux主要是为了管理页面状态，也就是state，当一个单页面应用变得特别复杂后，我们需要维护和管理很多的state，比如页面UI状态（分页数据、组件选中状态等）、本地存储的一些数据等。

管理不断变化的 state非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state在什么时候，由于什么原因，如何变化已然不受控制。当应用变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。（借鉴官网）

原理

Redux将整个应用的存储到一个地方（store)，组件可以通过将意图（action)分发到（dispatch）到store，store接收到会将放到reducer来处理，reducer接受旧state和action，处理之后将新state返回，然后通知订阅store的组件改变state来刷新的视图。

三大原则（官网）

单一数据源

整个应用state的被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree，你需要编写 reducers

组成部分

首先上图（借网上图）

[图片上传失败...(image-6c4d04-1598945747938)]

Store

import {createStore} from 'redux'
const store=createStore(fn);

store就是保存数据的地方，你可以把它看成一个数据，整个应用只有一个store。

首先要区分store和state，state是应用状态，一般本质上是一个普通对象，store是应用状态state的管理者。

Action

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

action 是把数据从应用传到 store的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch()将 action传到 store。

action本质上是 JavaScript 普通对象。我们约定，action内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放action。

Action Creator

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Action 创建函数 就是生成 action的方法。

Reducer

import {
  ADD_TODO,
  TOGGLE_TODO,
  SET_VISIBILITY_FILTER,
  VisibilityFilters
} from './actions'

...

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

Reducers 指定了应用状态的变化如何响应 actions并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

强力推荐大家看这篇文章 大神地址：从0到1实现一个Redux