1 react 中 redux的使用之数字的加减

1 下载 cnpm i redux -S

2 在src里面建一个store文件夹 ，在store里面建一个index.js，写入代码

//store - index.js
import {createStore} from "redux";

import reducer from "./reducer.js"
var store=createStore(reducer);
export default store;

3. 在store 里面建一个reducer.js，写入代码

const initialState = {
    n:1
}

export default (state = initialState, { type, payload }) => {
    switch (type) {

    // case typeName:
    //     return { ...state, ...payload }

    default:
        return state
    }
}

4. 然后就可以使用store仓库里面的值了，在app.js里面使用

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import store from "./store"
class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      n:store.getState().n   //store获取值的方法
    }
  }
  render(){
    let {n}=this.state;
    return (
      <div className="App">
        {n}
      </div>
    );
  }
}

export default App;

页面上就会出现数字1；

5. 现在我们来写一个数字的加减

//app.js
import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import store from "./store"
class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      n:store.getState().n
    }
  }
  reduce=()=>{
    store.dispatch({type:'REDUCE',num:1}); //分发动作
    store.subscribe(()=>{//订阅
      //当store里数据改变的时候会执行这个回调函数
        this.setState({
          n:store.getState().n
        })
      })
  }
  add=()=>{
    store.dispatch({type:'ADD',num:1});
    store.subscribe(()=>{
        this.setState({
          n:store.getState().n
        })
      })
  }
  render(){
    let {n}=this.state;
    return (
      <div className="App">
        <button onClick={this.reduce}>-</button>
        {n}
        <button onClick={this.add}>+</button>
      </div>
    );
  }
}

export default App;

//store-reducer.js
const initialState = {
    n:1
}

export default (state = initialState, { type, num }) => {
    switch (type) {
        case "REDUCE":
            var newState={...state};
            newState.n=newState.n-num;
            return newState;
        case "ADD":
            var newState={...state};
            newState.n=newState.n+num;
            return newState;
    default:
        return state
    }
}