一文搞懂redux在react中的初步用法

redux是一个数据状态管理插件，当使用react或是vue开发组件化的spa程序时，组件之间共享信息是一个非常大的问题。例如，用户登陆之后客户端会存储用户信息（id，头像等），而系统的很多组件都会用到这些信息，当使用这些信息的时候，每次都重新获取一遍，这样会非常的麻烦，因此每个系统都需要一个管理多组件使用的公共信息的功能，这就是redux的作用。

如果你是从来没有接触过redux的开发者，希望您能够有耐心的看一看，我也是看好很多博客慢慢自己总结的！！！！比大佬们一个一个分布找要强一点。

import react, { component, fragment } from 'react';

//class引入
import { connect } from 'react-redux';

//hook引入
import { useselector, usedispatch } from 'react-redux'

import { add, clear } from '../../redux/actions/count';


//hook 展示组件
const countitem = (props) => {
    // 解构出来
    const {
        count,
        flag,
        add,
        clear
    } = props
    return (
        <>
            <h2>当前求和为：{count}</h2>
            <h3>当前flag：{flag ? 'true' : 'false'}</h3>
            <button onclick={add}>点击+1</button>
            <button onclick={clear}>清零</button>
        </>
    )
}

//hook 容器组件
const count = () => {
    const count = useselector(state => state.sum)
    const flag = useselector(state => state.flag)
    const dispatch = usedispatch()

    const countadd = () => {
        console.log(add.type)
        dispatch(add(1))
    }

    const clearnum = () => {
        dispatch(clear())
    }

    return <countitem count={count} flag={flag} add={countadd} clear={clearnum}  />
}

export default count



// class 展示组件
// class count extends component {
//     add = () => {
//         // 通知redux
//         this.props.add(1);
//     };
//     clear = () => {
//         this.props.clear();
//     };
//     render() {
//         return (
//             <fragment>
//                 <h2>当前求和为：{this.props.count}</h2>
//                 <h3>当前flag：{this.props.flag ? 'true' : 'false'}</h3>
//                 <button onclick={this.add}>点击+1</button>
//                 <button onclick={this.clear}>清零</button>
//             </fragment>
//         );
//     }
// }

// class 容器组件
// export default connect(
//     // 1.状态
//     state => ({ count: state.sum, flag: state.flagstate }),
//     // 2.方法
//     { add, clear }
// )(count);

基本的使用差不多就是这个样子，我们在hook上面用到的关键方法就是useselector来使用redux的state、用dispatch来调用reduce；在class组件中用connect进行state和方法（reduce）的关联。

这里面难点就在于reduce和state

这里的reduce是什么

上面的代码里面我们用到了add和clear这两个方法，我们新建一个js文件来实现这两个方法。

// 为count组件创建action对象
// 引入常量
import { add, clear } from '../constant';

// 创建加一action对象的函数
export const add = data => ({
    type: add,
    data,
});

// 创建清零action对象的函数
export const clear = data => ({
    type: clear,
    data,
});

上面有常量----这是为了方便actiontype的统一管理，创建对应的action对象有助于代码模块化。
贴上，自己建一个constant.js放进去

export const add = 'add';
export const clear = 'clear';

到这里我们的action对象定义的差不多了，我们要进行reducer的管理了。也就是dispatch分发上面的action对象来实现state的更新

在reducer文件夹里面我们定义一个count.js

// 为count组件创建一个reducer
// reducer接收两个参数：之前状态的prestate，动作对象action

import { add, clear } from '../constant.js';

// 设定初始状态
const initstate = 0;

export default function addreducer(prestate = initstate, action) {
    // 从action中获取type和data
    const { type, data } = action;
    // 根据type决定如何加工数据
    switch (type) {
        case add:
            return prestate + data;
        case clear:
            return 0;
        // 初始化动作
        default:
            return prestate;
    }
}

上面的方法要通过dispatch来进行type的分发调用（强调加一）

到这里使用就完成了 接下来看配置redux到react项目中

这里就不要倒叙了，因为这里倒叙不合理。
这里关键的几个配置
store.js的配置和全局的store的使用

先看全局使用store
在你的根路由下面用provider包裹app。

import react from 'react';
import reactdom from 'react-dom';
import app from './app.jsx';
import store from './redux/store';
import { provider } from 'react-redux';

reactdom.render(
    // provider包裹app，目的：让app所有的后代容器组件都能接收到store
    <provider store={store}>
        <app />
    </provider>,
    document.getelementbyid('root')
);

这里面有个redux/store.js 看代码

// 整个文档只有一个store对象，createstore接收两个参数，第一个是state树，第二个是要处理的action
//applymiddleware 汇总所有的中间件变成一个数组依次执行，异步处理
import { createstore, applymiddleware } from 'redux';
//中间件
import thunk from 'redux-thunk';
//汇总所有的reducer
import allreducers from './reducers/index';
//这里是goole的调试调试工具，具体使用：百度
import { composewithdevtools } from 'redux-devtools-extension';

// 暴露store
export default createstore(allreducers, composewithdevtools(applymiddleware(thunk)));

到这里这篇文章就要结束了，里面的一些执行流程和原理我还不是理解，接下来仍要多多巩固，多多学习。

以上就是一文解决redux在react中的初步使用的详细内容，更多关于redux在react中使用的资料请关注其它相关文章！