React-redux使用的步骤总结

最新推荐文章于 2023-04-27 21:46:49 发布

YmwWow

最新推荐文章于 2023-04-27 21:46:49 发布

阅读量515

点赞数 2

分类专栏： React 文章标签： react-redux

本文链接：https://blog.csdn.net/YmwWow/article/details/97619622

版权

本文详细总结了React-redux的使用步骤，包括安装、文件结构、主要文件内容解析以及Provider和connect的用法，帮助开发者快速回顾和理解如何在React应用中集成和使用redux。

摘要由CSDN通过智能技术生成

React-redux的学习也有一定的时间了，非常好用，就是容易忘记用法，本文将总结他的用法。以备不时之需

一、使用前的准备

1. 使用React-redux需要安装redux，react-redux

yarn add redux，react-redux

2. 什么都不说，先把文件的结构建立好，使用redux 的时候，我们会建立如下文件：

3. 记住他们之间的关系

index.js 是主要的文件

action.js 是提交给reducer处理的一些方法，就写在这里

actionType.js 这里就是为了方法不写错，减少错误而存在的（方法名字大写）

reducer.js 这里是index的管理者，也就是store的管理者，就是处理一些东西的，如改变state的值等

一个一个来写一下他们文件内的内容

index.js

import {createStore} from 'redux'     
import reducer from './reducer'
const store = createStore(reducer)        //完成了reducer的注入,完成store的创建
export default store

// 这里是不建立state的值的，这一些都交给管理者reducer来处理，这里是固定写法

reducer.js

// 这里放一些处理store的方法
// 写业务逻辑
const defaultState = {    //首先要写一个默认的state，并将这里传给下面暴露的方法
    //  这里就是放一些公共的state的值，就是在这里出创建一个公共的一些数据
    inputValue: 'yangmingwu',
    list