Redux入门

简介

Redux是一个非常有用的框架，他主要解决状态的统一管理问题。而React则将所有组件视为状态机,所以Redux可以看作是一个React的数据管理中心。但需要注意，并不是必须用Redux来管理数据，只是该框架让复杂业务逻辑和多组件通信更加方便。

Redux的思想主要概括为下面2点：

a.Web 应用是一个状态机，视图与状态是一一对应的。

b.所有的状态，保存在一个store对象里面。

这样state就是一个单一的对象，所有的状态数据都维护在一颗状态树中，服务端很容易初始化状态，state则只能通过dispath(action)来触发更新，更新逻辑由reducer执行。

概念说明

Store

store是一个存储对象，保存着所有的数据，整个应用只有唯一一个Store对象。

Redux提供了createStore(fn)来生成一个Store对象

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

store.getState():获取当前状态

store.dispatch(action):用于触发state更新，将action发出。

store.subscribe(lister):用于注册state变化监听器，返回一个函数，调用该函数则解除监听器。

createStore(reducer,[initalState]):创建Store对象

State

Store对象包含所有数据，如果想得到某个时点的数据，就需要对Store生成快照，而生成的快照数据集合就叫做State。当前时刻的State可以通过store.getState()得到。

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

Action

状态的改变将会导致视图的变化，但是用户只能操作视图，所以必须让视图的操作来影响状态的改变，Action的作用就是通知视图操作了，状态也应该做相应的改变来渲染视图操作的效果。

Action是一个对象，该对象有如下属性：

type:action的名称，通常是字符串常量或者符号，必须。

payload:携带的信息，任何类型的值，可选。如果error为true则payload是一个错误对象。

error:操作错误标识，任何类型的值，可选。

meta:payload外的其他信息，任何类型的值，可选。

const actionName = "Redux test";function addAction(text){    return {        type:actionName,        payload:text    }}const newAction = addAction("Learn Redux");

Reducer

Store接收到Action以后，必须返回一个新的State，这样视图才会重新渲染，计算新的State的过程叫做Reducer。

Reducer是一个函数，接受2个参数，当前的state和action，返回一个新的state。

const reducer = function (state, action) {  // ...  return new_state;};

redux的工作原理:

1.首先定义好组件；

2.在组件触发事件中调用stroe.dispatch(action)，发出action，自动执行Reducer函数；

3.定义好Reducer对象来处理组件发出的action；

4.根据定义的Reducer对象创建store对象；

5.创建监听器，在store改变后重新渲染界面。store.subscribe(lister)

示例

import {createStore} from 'redux';import React from 'react';import ReactDOM from 'react-dom';let countReducer = (state=0,action) => {//第二步：定义Reducer执行函数    switch(action.type){    case "add":        state += 1;         break;    case "substrat":        state -=  1;        break;    default:        break    }    return state;}let store = createStore(countReducer);//第三步：创建Store对象let addCount = ()=>{//加法操作    store.dispatch({        type:"add",        payload:"每次加1"    })}let subStractCount= () => {//减法操作   store.dispatch({        type:"substrat",        payload:"每次减1"    })}const render = () => {    ReactDOM.render(//第一步：定义组件            <div>                <h1>{store.getState()}</h1>                <button onClick={addCount} style={{padding:"5px 15px",margin:"0 10px 0 0"}}>+</button>                <button onClick={subStractCount} style={{padding:"5px 15px",margin:"0 10px 0 0"}}>-</button>            </div>,            document.getElementById("redux")        )    }store.subscribe(render)//第四步：创建监听器，监听到状态修改后就重新渲染界面render()//初始化渲染

效果图：

点击+号，数字加1，点击-号，数字减一。