react中redux的基本使用

今天趁着周六日的时间，自己写一些小的react实例练练避免生疏，今天主要练习一下react中经常使用的状态管理redux和react自己封装的react-redux的使用。
redux是一个独立的框架，并不只是服务于react，所以他在react中的用法并不是很友好，而且与vuex不同的是它本身并不支持异步的操作，在vuex我们可以在action中进行异步的操作。首先我们来使用最原始的redux创建一个实例，然后再用react-redux进行改造。
通过create-react-app创建一个项目，在src下面创建一个reduxdemo.js文件和一个store文件夹，在store文件夹下面创建index.js文件。

安装

npm install redux react-redux -S 或
cnpm install redux react-redux -S 或
yarn add redux react-redux

src/store/index.js

我们写一个登录状态改变的小demo

import { createStore } from "redux"

function loginReducer(state="登录", action){//创建reducer并赋予state默认值
    switch(action.type){
        case "nologin":
            return "登录"
        case "nowlogin":
            return "登录中...."
        case "haslogin":
            return "已登录"
        case "logout" :
            return "退出登录"
        default :
            return state
    }
}
const store = createStore(loginReducer)//创建store
export default store;

src/reduxdemo.js

//在这我使用class组件方便一会使用装饰器改造
import React from "react"
import store from "./store"//引入store

class Reduxdemo extends React.Component{
    render(){
        return (
            <div>
                <p>{store.getState()}</p>//获取store中的state
                <button onClick={()=>store.dispatch({type: "nowlogin"})}>去登陆=&gt;登录中</button><br/><br/>
                <button onClick={()=>store.dispatch({type: "haslogin"})}>登录中=&gt;登陆成功</button><br/><br/>
                <button onClick={()=>store.dispatch({type: "logout"})}>退出</button>
            </div>
        )
    }
}
export default Reduxdemo

在src/app.js中引入reduxdemo.js

//删除了原来app中不需要的内容
import React from 'react';
import Reduxdemo from './reduxdemo';

function App() {
  return (
    <div className="App">
        <Reduxdemo></Reduxdemo>
   </div>
  );
}

export default App;

接着改造一下src/index.js，通过store.subscribe()方法订阅监听store中数据的变化，让组件重新渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from "./store"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

store.subscribe(()=> ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
))

serviceWorker.unregister();

这样redux的整个流程就走完了，启动项目

1.gif

我们发现他需要破坏react项目原有的结构，所以react推出了react-redux，下面我们来改造demo
store文件夹内容保持不变
我们首先删除src/index.js中订阅的方法。

src/app.js

import React from 'react';
import Reduxdemo from './reduxdemo';
import store from "./store"
import { Provider } from "react-redux"//引入Provider,是一个顶级组件，隔代传值

function App() {
  return (
    <div className="App">
      <Provider store={store}>//将store传下去
        <Reduxdemo></Reduxdemo>
      </Provider>
   </div>
  );
}

export default App;

src/reduxdemo.js

import React from "react"
import { connect } from "react-redux"//connect 一个高阶组件
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {
                                nowlogin: () => ({type: "nowlogin"}),
                                haslogin: () => ({type: "haslogin"}),
                                logout: () => ({type: "logout"}),
                            }

class Reduxdemo extends React.Component{
    render(){
        const { status, nowlogin, haslogin, logout } = this.props;
        return (
            <div>
                <p>用react-redux改造后</p>
                <p>{status}</p>
                <button onClick={nowlogin}>去登陆=&gt;登录中</button><br/><br/>
                <button onClick={haslogin}>登录中=&gt;登陆成功</button><br/><br/>
                <button onClick={logout}>退出</button>
            </div>
        )
    }
}
//两个参数传入顺序不要写反了先state后dispatch
export default connect(mapStateToProps, mapDispatchToProps)(Reduxdemo);

启动项目

2.gif

接下来我们来看看装饰器的写法，之前在高阶组件那篇文章中使用过装饰器不过那是基于next.js项目的，create-react-app使用有些不同
同样安装依赖@babel/plugin-proposal-decorators
然后执行命令：

npm run eject

到package.json中做修改

找到babel
"babel": {
    "presets": [
      "react-app"
    ],
//添加下面这段
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },

然后修改src/reduxdemo.js

import React from "react"
import { connect } from "react-redux"
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {
                                nowlogin: () => ({type: "nowlogin"}),
                                haslogin: () => ({type: "haslogin"}),
                                logout: () => ({type: "logout"}),
                            }
//装饰器调用
@connect(mapStateToProps, mapDispatchToProps)
class Reduxdemo extends React.Component{
    render(){
        const { status, nowlogin, haslogin, logout } = this.props;
        return (
            <div>
                <p>用react-redux改造后</p>
                <p>{status}</p>
                <button onClick={nowlogin}>去登陆=&gt;登录中</button><br/><br/>
                <button onClick={haslogin}>登录中=&gt;登陆成功</button><br/><br/>
                <button onClick={logout}>退出</button>
            </div>
        )
    }
}
export default Reduxdemo