React教程之十分钟入门Redux(react-redux-starter)

绝地灬酷狼 2021-12-21 12:53 347阅读 0赞

## 前言 ##

网上的教程的确很多，也很杂乱，看了半天，redux的都没讲清楚什么，`概念都有点生硬`，这里经过转换一下概念和简单的demo实战，希望可以帮助大家更好的理解Redux。

一开始肯定所有人都有疑问，究竟什么是`redux action reducer store`？

## 什么是Redux ##

官方解释：`Redux is a predictable state container for JavaScript apps.` 意思就是`Redux是js应用的 一种可预测的状态容器`，具体什么意思呢，就是允许你`自由传输`并处理react component的`state`的东西，允许再非父子关系的组件之间传值。

## 为什么使用Redux ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
`没有使用Redux`的情况，如果`两个组件`(非父子关系)之间需要通信的话，可能需要多个中间组件为他们进行消息传递，这样既浪费了资源，代码也会比较复杂。

## Redux的概念 ##

`Redux`中提出了单一数据源`Store` 用来存储`state状态数据`，所有的组建都可以通过`Action`修改`Store`，也可以从`Store`中获取最新状态`state`。使用了redux就可以完美解决组建之间的通信问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

*  **reducer**:理解为`receiver接收器`或者`handler处理器`，根据`传入的action`向store`返回新的state`，例如下文demo中的`counter`计数器，然后counter中就可以根据传进来的`action中的type`来进行逻辑处理,最后返回处理完的新state。
 *  **action**:理解为`发送者Sender`或者`dispatcher分发者`，action中一般包含`type`(必须)和`data`(可选),`action.type`就相当于一个`主题`或者一个`标识`，方便在reducer中根据`不同的type`进行`不同的处理`，一般再`react.component`中主动调起`dispatch(action)`分发请求之后(作为`发送者Sender`)，`reducer`就可以接收(作为`Receiver接收者`)到`action和state`参数然后去处理。
 *  **store**:创建`store`，用于`存储state`数据，进行state的`传输`，理解为一个全局通用的state仓库或者state工厂。

## Redux安装 ##

一如既往的简单

npm install redux --save

目前安装到的版本是`4.0.x`的，版本差不多就可以了

"dependencies": { 
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-scripts": "3.0.1",
        "redux": "^4.0.1"
      }

## react-redux-starter ##

项目结构如下，稍后会上传到开源项目里面。

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]   index.js ##

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './components/App';
    import { createStore} from 'redux'
    import { counter} from './redux/reducers'
    
    
    //生成一个store对象
    //内部会调用一次reducer函数得到初始state
    const store = createStore(counter)
    console.log(store);
    //传入store
    ReactDOM.render(<App store={ store}/>, document.getElementById('root'));
    //ReactDOM.render(<App />, document.getElementById('root'));

## App.js ##

import React, {  Component } from 'react';
    import {  INCREMENT, DECREMENT } from '../redux/action-type'
    
    export default class App extends Component { 
    	//by zhengkai.blog.csdn.net
      increment = () => { 
        //得到选择增加的数量
        const number = this.select.value * 1;
        //dispatch分发到对应的action->INCREMENT
        this.props.store.dispatch({  type: INCREMENT, data: number })
      }
      decrement = () => { 
        //得到选择增加的数量
        const number = this.select.value * 1;
        //dispatch分发到对应的action->DECREMENT
        this.props.store.dispatch({  type: DECREMENT, data: number })
      }
      render() { 
        const {  count, blog } = this.props.store.getState();
        console.log(this.props.store.getState());
        return (
          <div className="App">
            <p>
              click { count} times ...... by { blog}
            </p>
            <div>
              <select ref={ select => this.select = select}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="10">10</option>
              </select>
              <button onClick={ this.increment}>+</button>
              <button onClick={ this.decrement}>-</button>
            </div>
          </div>
        );
      }
    }

## reducers.js ##

import {  INCREMENT, DECREMENT } from './action-type'
    
    //by zhengkai.blog.csdn.net 
    //reducer,相当于JMS的订阅器,type相当于主题,
    //是一個 function，負責接收被 dispatch 的 action 並處理 state，要注意的是需傳入兩個參數到這個 function，第一個是目前的 state，第二個則是我們定義的 action 物件
    export function counter(state = {  number: 0, blog: 'zhengkai.blog.csdn.net' }, action) { 
        console.log('counter', state, action);
        switch (action.type) { 
            case INCREMENT:
                state.number = state.number + action.data
                return state
            case DECREMENT:
                state.number = state.number - action.data
                return state
            default: return state
        }
    }

## action-type.js ##

//拒绝魔法变量,我用固定大写变量
    export const INCREMENT = 'INCREMENT'
    export const DECREMENT = 'DECREMENT'

## 效果演示 ##

F12打开控制台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20211220/5e30ca39c9994893b7a901c0821108e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20211220/191e6734b1b7441eabc41292008d75c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20211220/d425082f09a04193894fe49145e99c78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20211220/2d7c2ea748444f0e8cdc845aac9800b3.png