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

前言

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

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

什么是Redux

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

为什么使用Redux

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

Redux的概念

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

  • 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

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

在这里插入图片描述
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打开控制台
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页