Redux基本语法实例介绍

一.redux

1.什么是redux

redux是专注于状态管理,单一状态 ，单向数据流处理.

在redux中，所有的数据（比如state）被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树，保存了所有对象的状态。任何ui都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action。分发在这里意味着将可执行信息发送到store。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。

2.redux 可以用这三个基本原则来描述

a.单一数据源

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

b.state 是只读的

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

c.使用纯函数来执行修改

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

二、基本概念和 api

1.store

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

redux 提供createstore这个函数，用来生成 store。

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

createstore函数接受另一个函数作为参数，返回新生成的 store 对象。

2. state

store对象包含所有数据。如果想得到某个时点的数据，就要对 store 生成快照。这种时点的数据集合，就叫做 state。

当前时刻的 state，可以通过store.getstate()拿到。

import { createstore } from 'redux';
const store = createstore(fn);
const state = store.getstate();

redux 规定， 一个 state 对应一个 view。只要 state 相同，view 就相同。你知道 state，就知道 view 是什么样，反之亦然。

3.action

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

state 的变化，会导致 view 的变化。但是，用户接触不到 state，只能接触到 view。所以，state 的变化必须是 view 导致的。action 就是 view 发出的通知，表示 state 应该要发生变化了。

(1).action 是一个对象。其中的type属性是必须的，表示 action 的名称。

const add_todo = 'add_todo'
//action 的名称是add_todo，它携带的信息是字符串add_todo

const action = {
	type: 'add_todos',
	payload: 'learn redux'
};
//action 的名称是add_todos，它携带的信息是字符串learn redux。

可以这样理解，action 描述当前发生的事情。改变 state 的唯一办法，就是使用 action。它会运送数据到 store。

(2).action创建函数

三.简单的列子

独立团项目：团长决定：团里人员发展有生活和军事。所有状态归赵政委(redux)管理，自己只打战(view显示)

赵政委(redux)的工作就是：

有一个保险箱(store),