最简单的redux,react-redux示例——手把手教你学会react-redux分模块存储

本文详细介绍了如何使用redux和react-redux进行项目配置,包括下载依赖、设置项目目录、配置store、管理reducers以及如何在组件中获取和改变state。通过一个主题色管理模块的reducer示例,讲解了reducer的工作原理。最后,展示了如何通过connect方法将react组件与redux store连接,实现state的获取和更新。
摘要由CSDN通过智能技术生成

一,下载redux,react-redux,prop-types

npm install --save prop-types
npm install --save redux
npm install --save react-redux

二、下面是项目目录结构

react项目结构

三,index.js或者app.js文件配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from "./redux/store";
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);
serviceWorker.unregister();

这里主要引入Provider组件,以及redux store对象,react-redux 的Provider组件包裹在根组件外层,使所有的子组件都可以拿到state<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值