redux入门基础一

        初学redux，前前后后看了两三遍，可能是自己太心急了，官方文档很简单的逻辑一直搞不明白，现在静下心来，一行一行慢慢看，总算摸到一点门路，先记录一下防止再忘记了。

        刚开始看redux，有三个关键词是要懂得——action、reducer、store。

Action

        个人认为action就是一个数据模板，如果想要传入一个参数，需要套上这层模板才可以。

        redux是什么，是js的状态管理，既然想让人家来管理数据，就得按人家的规矩来。

        定义一个action就是定义一个对象，只不过，定义的这个对象中，必须使用一个字符串类型的type字段来表示将要执行的动作，因为所有action都是用的这个模板，所以为了区分，就得给每一个action定义一个“名字”，知道这个action是要干什么的。

例如：

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

        这就定义了一个action，一般来说，做一个小的应用系统，这样就ok了，但是随着应用规模的扩大，需要将type的值显示的定义成常量，如果能使用单独的模块来存放action就更好了。

例如：

// 同文件中定义常量
const ADD_TODO = 'ADD_TODO'

// 或者使用单独模块来存放action
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

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

Action创建函数

        action创建函数就是生成action的方法，在recux中action创建函数只是简单的返回一个action。

例如：

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

        这样做能使action创建函数更容易被移植和测试。之后如果想用这个action，直接调用addTodo函数就可以了。当然一个文件里可以有多个action，多个action创建函数，将这一块内容统称为actions。

       想必到这里，应该初步了解了action是什么了吧。记住，actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。下面接着看第二个关键词，这个关键字将会告诉我们如何来改变一个状态，也就是如何来改变一个数据。

Reducer

        reducer 就是一个纯函数，接收旧的 state和 action，返回新的 state。举个例子，这句话的意思就是相当于你去换手机屏，你自己带着新屏，你需要把手机和新屏都给维修人员，人家将换好手机屏的手机再还给你。

        我们需要修改数组中指定的数据项而又不希望导致突变, 因此我们的做法是在创建一个新的数组后, 将那些无需修改的项原封不动移入, 接着对需修改的项用新生成的对象替换。

        和action一样，可以同时处理多个action，将这一块内容统称为reducers。

        具体函数方法示例，可以参考文末官方文档链接，讲的特别详细。

        上面两个关键字讲解完了，但是如何能使它们相互建立联系，就需要最后一个关键词。

Store

        我们知道了 action 是来描述“发生了什么”， reducers 是根据 action 来更新 state 的。那么Store 就是把它们联系到一起的对象。

它给我们提供了下面几个方法：

• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

方法示例：

1、创建一个store

import todoApp from './reducers'
let store = createStore(todoApp)

2、打印初始状态

// 打印初始状态
console.log(store.getState())

3、注册监听器

// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

4、对数据进行一系列更新

// 发起一系列 action
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

5、注销监听器

// 停止监听 state 更新
unsubscribe();

        通过监听器，我们能看到 store 里的 state 是如何变化的。

        到这里，已经初步搞懂redux这三个基本关键词是什么意思了，本人也是初学redux，有哪里不对，还望指正。

 

参考链接：https://www.redux.org.cn/docs/basics/Actions.html