[JavaScript知识库]Redux专题-3.react-redux使用(同步)

react-redux使用

开始之前强调一下，redux和react并没有直接的关系，你完全可以在react，Vue，Angular…中使用redux

尽管这样说，redux依然是和react或者Deku的库结合的更好，因为它们是通过state函数来描述界面的状态，redux可以发射状态的更新，让他们做出响应；

虽然我们之前实现了connect，Provider这些帮助我们完成连接redux/react的辅助工具，但是实际上redux官方帮助我们提供了react-redux库，可以直接在项目中使用，并且实现的逻辑会更加严谨和高效；

1.安装react-redux

yarn add react-redux

2.使用connect函数

• 将之前使用的connect函数的组件，换成react-redux的connect函数；

Home组件

import React, { useEffect, useState } from 'react';
import {connect} from 'react-redux'
import {addAction,reduceAction} from '../store/createAction.js'

function Home(props) {
  console.log(props);
  return (
    <div>
      <h2>{props.useComponent}</h2>
      <p>home-{props.counter}</p>
      <button onClick={()=>{
        props.add(2)
      }}>+2</button>
      <button onClick={()=>{
        props.reduce(1)
      }}>-1</button>
    </div>
  );
}

function mapStateToProps(state){
  return{
    counter:state.counter
  }
}
function mapDispatchToProps(dispatch){
  return{
    add(speed){
      dispatch(addAction(speed))
    },
    reduce(speed){
      dispatch(reduceAction(speed))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home)

About组件也是如此

3.使用Provider：

• 将自己创建的Context的Provider，换成react-redux的Provider组件
• 注意：这里传入的store属性，而不是value属性；

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "antd/dist/antd.css";
import "./index.css";
import {Provider} from "react-redux";
import store from "./store/index.js";
function render() {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById("root")
  );
}
render();