Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能

connect

我们会用connect来包裹组件来让改组件使用到上级组件Provider的store
用法是connect(mapStateToProps,mapDispatchToProps)(组件)
使用的使用通过this.props.xxx来使用state，出发action的时候this.props.dispatch()

现在Hooks推出了很多hook来帮助我们实现更好的函数式组件编程。

下面我们实现一个小案例：

0.在app.js跟组件中使用Provider提供store
1.在子组件对redux中的信息进行展示
2.在子组件对年龄这个属性进行递增或者递减
3.在孙组件中对年龄进行重置0

最终样式

一、首先

我们需要准备我们的dispather函数和一些默认信息：
我们在src|store|index.js中写入以下内容，用于初始化store做准备：

export let initInfo = {
    
    
    name: "六卿",
    age: 18,
    habby: ["唱歌", "跳舞", "Run"]
}

export const ReduxFun = (state, action) => {
    
    
    switch (action.type) {
    
    
        case 'ageAdd':
            return {
    
    
                ...state,
                age: state.age + 1
            };
        case 'ageReduce':
            return {
    
    
                ...state,
                age: state.age - 1
            };
        case 'change0':
            console.log({
    
    
                ...state,
                age: 0
            })
            return {
    
    
                ...state,
                age: 0
            }
        default:
            return state
    }
}

我们使用export暴露的形式，所以我们在使用的时候需要使用解构的形式：

import {
    
     ReduxFun, initInfo } from './store/index'

二、其次

在App.js中，我们要引入store/index.js,我们要使用初始化好的默认值和dispatch函数

import A from './com/A'
import {
    
     ReduxFun, initInfo } from './store/index'
import {
    
     createStore } from "redux";
import {
    
     Provider} from 'react-redux'

function App() {
    
    
  let store = createStore(ReduxFun, initInfo)
  return (
    <div style={
    
    {
    
    border:"5px solid pink",width:"400px",margin:"0 auto",marginTop:"50px",paddingBottom:"30px"}}>
      <div style={
    
    {
    
    marginBottom:"30px"}}>我试试APP跟组件</div>
      <Provider store={
    
    store}>
        <A />
      </Provider>
    </div>
  );
}

export default App;

上面我们做的有两件事：
1：初始化store,使用redux中解构出来的createStore来创建，第一个参数是我们的dispatch函数，第二个参数是我们初始值（初始state）

let store = createStore(ReduxFun, initInfo)

2：将创建好的store通过react-redux中解构出来的Provider组件注入到后代组件中，store={store}

<Provider store={
    
    store}>
   <A />
</Provider>

三、最终

1.在（A组件）子组件中使用APP_Provider的state以及修改age的值

首先看一下A组件的代码逻辑：

import React from 'react'
import Achild from './ACHILD'
import {
    
     useDispatch, useSelector } from 'react-redux'
const A = () => {
    
    
    let dispatch = useDispatch()
    const state = useSelector(state => state)
    const addAge = () => {
    
    
        dispatch({
    
     type: 'ageAdd' })
    }
    const ageReduce = () => {
    
    
        dispatch({
    
     type: 'ageReduce' })
    }
    return (
        <div style={
    
    {
    
     paddingLeft: "50px", width: "300px" }}>
            <div style={
    
    {
    
     border: "2px solid #ccc", marginTop: "30px", padding: "30px" }}>
                <div> 我是A组件</div>
                姓名：{
    
    state.name} <br />
                年龄：{
    
    state.age}<br />
                爱好：{
    
    state.habby.join(';')}<br />
                <div style={
    
    {
    
     marginTop: "30px" }}></div>
                <button style={
    
    {
    
     marginRight: "20px" }} onClick={
    
    addAge}>年龄增加1</button>
                <button onClick={
    
    ageReduce}>年龄减少1</button><br />
            </div>
            <Achild />
        </div>
    )
}
export default A

这个组件做了两件事：
1.展示state中的属性值：

//获取state中的值
const state = useSelector(state => state)
//在页面展示
 姓名：{
    
    state.name} <br />
 年龄：{
    
    state.age}<br />
 爱好：{
    
    state.habby.join(';')}<br />

2.改变age的值

//获取dispatch
 let dispatch = useDispatch()
 //点击事件
 <button style={
    
    {
    
     marginRight: "20px" }} onClick={
    
    addAge}>年龄增加1</button>
 <button onClick={
    
    ageReduce}>年龄减少1</button><br />
//方法函数
 const addAge = () => {
    
    
        dispatch({
    
     type: 'ageAdd' })
    }
 const ageReduce = () => {
    
    
        dispatch({
    
     type: 'ageReduce' })
    }

这个时候已经可以控制age的增加和减少了，现在我们要看一下孙组件改变state

2.（ACHILD组件）孙组件改变state

import React from 'react'
import {
    
     useDispatch } from 'react-redux'
const ACHILD = () => {
    
    
    let dispatch = useDispatch()
    const changeAge0 = () => {
    
    
        dispatch({
    
     type: 'change0' })
    }
    return (
        <div style={
    
    {
    
     border: "1px solid orange", marginTop: "30px", padding: "30px" }}>
            <div style={
    
    {
    
    marginBottom:"30px"}}> 我是ACHILD组件</div>
            <button onClick={
    
    changeAge0}>age重置0</button>
        </div>
    )
}
export default ACHILD

这个组件只做了一件事
1.出发redux中的dispatch方法，重置age的值

<button onClick={
    
    changeAge0}>age重置0</button>
let dispatch = useDispatch()
    const changeAge0 = () => {
    
    
        dispatch({
    
     type: 'change0' })
    }

四、总结

1. 使用createStore来创建仓库；
2. 使用Provider组件给后代注入创建好的store；
3. 后代组件使用useSelector使用state；
4. 后代组件使用useDispatch出发action改变state.

参考文章

1.React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
2.redux中使用useSelector、useDispatch替代connect

其他文章

1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面

六卿

见贤思齐焉，见不贤内自省