三分钟看完react-redux

三分钟看完react-redux

Redux

Redux 是一款著名

JavaScript 状态管理容器

,提供与可预测的状态管理。
Redux 除了跟 React 配合使用，还可以配置 JS 、Vue 使用。

设计思想

❶Redux 是将整个应用状态存储到一个叫做 store 的地方，里面存在一个状态树 state tree
❷组件可通过 store.dispatch 派发行为 action 给 store, store 不会直接修改 state, 而是通过用户编写的 reducer 来生成新的 state ，并返回给 store
❸其它组件通过订阅 store 中的 state 状态变化来刷新自己的视图

三大原则

❶整个应用有且仅有一个

store

, 其内部的

state tree

存储整个应用的 state。
❷state 是只读的，修改

state

只能通过派发

action

，为了描述 action 如何改变 state 的，需要编写 reducer 纯函数。
❸整个应用的

state

被存储在一颗

object tree

中，并且这个

object tree

只存在于唯一一个

store

中单一数据源的设计让 React 组件之间通信更加方便，也有利于状态的统一管理。

Redus组成

State状态

DomainState:服务器返回的State
UIState:当前组件的State
APP State：全局的State

Action事件

本质就是一个JS对象
必须要包含type属性
只是描述了有事情要发生，并没有描述如何去更新state

Reducer

本质就是函数
响应发送过来的action
函数接收两个参数，第一个是初始化，第二个是发送过来的action
必须要有return返回值

Store

用来把action和reducer关联到一起的
通过createStore来创建Store
通过subscribe来注册监听

案例展示

准备工作

安装redux
npm install redux

创建Action

创建一个action.js文件用于创建Action
利用return在Action创建函数中返回Action对象，必须携带type属性
将Action创建函数导出

constsendAction=()=>{//返回一个Action对象、return{
        type:'action-type',
        value:'我是一个action '}}

module.exports ={
    sendAction
}

构建Reducer

创建一个reducer.js文件，用来构建reducer，reducer需要接收两个参数
第一个参数是state，可以先初始化一个state，然后进行赋值
第二个参数是判断action的type值是否是我们发送的，如果是的话，通过return返回新的state
把reducer导出

const initstate ={
    value:'默认值'}constreducer=(state = initstate,action)=>{
    console.log('reducer',state,action)switch(action.type){case'action-type'://合并Action和statereturn Object.assign({},state,action)default:return state;}}
module.exports ={
    reducer
}

构建store

创建store.js文件，用来创建store
createStore函数里面第一个参数接收的是reducer
createStore的返回值就是构建好的store
然后将store导出

import{createStore}from"redux";//导入reducerimport{reducer}from'./reducer'//构建storeconst store =createStore(reducer);exportdefault store;

使用

创建Home.js用于页面使用
给页面创建一个button按钮用于发送Action
在点击事件中通过store.dispatch发送Action
注册监听，通过store来进行监听器的注册，返回值可以用来销毁监听

import React from"react";//导入storeimport store from"./store";//导入actionimport{sendAction}from'./action'classHomeextendsReact.Component{handleClick=()=>{const action =sendAction()//发送一个Action
        store.dispatch(action)}//注册监听componentDidMount(){
        store.subscribe(()=>{
            console.log('subscribe',store.getState());this.setState({});})}render(){return<button onClick={this.handleClick}>点我发送Action</button>}}exportdefault Home;