reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之入口index.js引入redux(二)

react项目业务开发中，我们会遇到很多组件需要共享的数据，最常见的是我们登陆的鉴权token，用户的登录名缓存等等其他的数据。所以我们需要使用到react框架的插件redux来实现。

yarn add redux   //"redux": "^4.1.1",

然后来改造我们的index入口文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
//引入reducer
import { counter } from "./index.redux";
import { createStore } from "redux";

//创建store
const store = createStore(counter);

ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React, { Component } from "react";
import { Button, WhiteSpace } from "antd-mobile";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App-header">
        <h2>总计:现在一共赢了3把王者荣耀</h2>
        <WhiteSpace size="sm" />
        <Button type="primary">立即赢了一把</Button>
        <WhiteSpace size="sm" />
        <Button type="primary">立即输了一把</Button>
        <WhiteSpace size="sm" />
        <Button type="primary">过了三秒钟后赢了一把</Button>
      </div>
    );
  }
}
export default App;

加下来我们来实现按钮的点击后数据的增减，与延时的操作

赢了一把加1

//index.redux.js
export const ADD_GUN = "add";
export const REMOVE_GUN = "remove";

//创建reducer,函数名就是我们在index导入的被包裹到createStore里面的
export function counter(state = 0, action) {
  switch (action.type) {
    case ADD_ONE:
      return state + 1;
    case REMOVE_GUN:
      return state - 1;
    default:
      return 10;
  }
}

redux 是同步的，所以我们要创建一个action,reducer接收一个action然后进行状态的修改，返回修改后的新的状态

//专门创建action
export function addOne() {
  return {
    type: ADD_ONE,
  };
}
export function removeOne() {
  return {
    type: REMOVE_ONE,
  };
}

这样我们就完成了reducer的封装

我们测试下，创建store是否成功

...
console.log(store, "store");
...

看到这个，就表示我们的配置生效了！
那我们怎么获取到store里面的状态呢？控制台里面显示的很清楚了，有个getState方法~

const data = store.getState();
console.log(store, "store");
console.log(data, "data");

这样我们就获取到了存在redux里面的初始值！好的，该是我们来改变这个值的时候了

在index.js的render方法里加上

ReactDOM.render(<App store={store} />, document.getElementById("root"));

然后再App.js里面进行获取

···
render() {
    const { store } = this.props;
    console.log(store, "app");
    ...
 }

获取到了我们在index.js里面一模一样的内容

import React, { Component } from "react";
import { Button, WhiteSpace } from "antd-mobile";
import "./App.css";
//引入我们定义的action,是因为我们必须通过store.dispatch一个action去改变数据，action是一个返回对象的函数
import { addOne } from "./index.redux";

class App extends Component {
  render() {
    const { store } = this.props;
    let num = store.getState();
    console.log(store, "app");
    return (
      <div className="App-header">
        <h2>总计:现在一共赢了{num}把王者荣耀</h2>
        <WhiteSpace size="sm" />
        //派发一个action
        <Button type="primary" onClick={() => store.dispatch(addOne())}>
          立即赢了一把
        </Button>
        <WhiteSpace size="sm" />
        <Button type="primary">立即输了一把</Button>
        <WhiteSpace size="sm" />
        <Button type="primary">过了三秒钟后赢了一把</Button>
      </div>
    );
  }
}
export default App;

此时发现我们的代码没有效果，但是也没有报错，说明我们的代码配置正确，但是还是不够，继续改造index.js

...
//创建store
const store = createStore(counter);

function render() {
  ReactDOM.render(<App store={store} />, document.getElementById("root"));
}
//自动调用一次
render();

//监听到render的更新，每次更新都会获取到最新的state
store.subscribe(render);
...

这样我们就实现了统计加法的功能

接下来，同理我们在完善减法的统计

//App.js
import { addOne, removeOne } from "./index.redux";
<Button type="primary" onClick={() => store.dispatch(removeOne())}>
          立即输了一把
        </Button>

这样我们就实现了redux的计算功能