reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之react-redux引入告别getStore(五)

在前面的几篇介绍中，我们一直在手动的去获取更新后的store数据，现在我们使用react-redux彻底告别手动操作，实现自动获取state。

改造我们的index.js入口文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { counter } from "./index.redux";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
//处理异步的中间件
import thunk from "redux-thunk";
//创建store

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  counter,
  /* preloadedState, */ composeEnhancers(applyMiddleware(thunk))
);

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

index.js改造完了，再看看我们的页面

在App.js里面获取不到getState了，很明显是我们的store传入方式变了，不要慌，我们来改造App.js

...
import { connect } from "react-redux";
...

完整的代码如下

import React, { Component } from "react";
import { Button, WhiteSpace } from "antd-mobile";
import "./App.css";
import { connect } from "react-redux";
import { addOne, removeOne, addGunAfrer } from "./index.redux";

class App extends Component {
  render() {
    const { num, addOne, removeOne, addGunAfrer } = this.props;
    return (
      <div className="App-header">
        <h2>总计:现在一共赢了{num}把王者荣耀</h2>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={addOne}>
          立即赢了一把
        </Button>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={removeOne}>
          立即输了一把
        </Button>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={addGunAfrer}>
          过了三秒钟后赢了一把
        </Button>
      </div>
    );
  }
}
const mapStatetoProps = (state) => ({
  num: state,
});
const mapDispatchtoProps = {
  addOne,
  removeOne,
  addGunAfrer,
};

export default connect(mapStatetoProps, mapDispatchtoProps)(App);

此时，我们再进行测试

发现我们的功能也是正常运行的！至此我们的react-redux就配置完成了！以后就可以愉快的玩耍了！

但是，出于优化代码的目的，我们还可以使用@装饰器模式来进行connect。

具体的改造如下:安装如下的依赖

"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-decorators": "^7.13.5"

config-overrides.js

const {
  override,
  fixBabelImports,
  addDecoratorsLegacy,
} = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: "css",
  }),
  addDecoratorsLegacy()
);

App.js

import React, { Component } from "react";
import { Button, WhiteSpace } from "antd-mobile";
import "./App.css";
import { connect } from "react-redux";
import { addOne, removeOne, addGunAfrer } from "./index.redux";

@connect(
  (state) => ({
    num: state,
  }),
  {
    addOne,
    removeOne,
    addGunAfrer,
  }
)
class App extends Component {
  render() {
    const { num, addOne, removeOne, addGunAfrer } = this.props;
    return (
      <div className="App-header">
        <h2>总计:现在一共赢了{num}把王者荣耀</h2>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={addOne}>
          立即赢了一把
        </Button>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={removeOne}>
          立即输了一把
        </Button>
        <WhiteSpace size="sm" />
        <Button type="primary" onClick={addGunAfrer}>
          过了三秒钟后赢了一把
        </Button>
      </div>
    );
  }
}
/* const mapStatetoProps = (state) => ({
  num: state,
});
const mapDispatchtoProps = {
  addOne,
  removeOne,
  addGunAfrer,
}; */
export default App;
// export default connect(mapStatetoProps, mapDispatchtoProps)(App);

再来测试我们的页面

这样我们的代码也正常运行了！至此，相关的优化就做完了！