Redux 数据分片

  1. 分析
    一个项目:

    • banenr
    • home
    • mine
    • login
    • register
    • detail
    • shopcar
    • 会员
    • 普通用户数据
  2. 解决: 希望的一个类型数据一个模块 ---- > reducer划分 combineReducers

  3. 分析: 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包

  4. 解决: redux combineReducers
    每一个数据包的目录结构

    • store
      • home
        • state.js
        • type.js
        • reducer.js
        • actionCreator.js
        • 我们需要一个统一的redcuer的管理者

操作步骤:

  1. 新建redux项目 安装redux
 npx create-react-app redux_advance
 yarn add redux
  1. 在src目录下新建components文件夹,里面新建Button和Content两个组件,在App.js里引入两个组件

Button组件控制视图变化

import React, { Component } from 'react'

import actionCreators from '../store/count/actionCreators';

class Button extends Component{
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在React Redux中实现数据持久化有多种方法,下面是其中一种常用的方法: 1. 使用redux-persist库:redux-persist是一个用于实现Redux数据持久化的第三方库。它通过将Redux store中的数据保存到本地存储(如localStorage或sessionStorage)中,以便在刷新页面或重新加载应用程序时保持数据的持久性。 首先,安装redux-persist库: ``` npm install redux-persist ``` 然后,在Redux的配置文件中,进行redux-persist的配置和初始化: ```javascript import { createStore } from 'redux'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // 默认使用localStorage // 导入你的reducer import rootReducer from './reducers'; // 配置redux-persist const persistConfig = { key: 'root', // 存储的key,默认为root storage, // 使用的存储引擎,默认为localStorage }; const persistedReducer = persistReducer(persistConfig, rootReducer); // 创建store const store = createStore(persistedReducer); const persistor = persistStore(store); export { store, persistor }; ``` 最后,在应用程序的入口文件中,使用`PersistGate`组件包裹整个应用程序,并将`persistor`作为其属性: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { store, persistor } from './store'; ReactDOM.render( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> // 应用程序的根组件 </PersistGate> </Provider>, document.getElementById('root') ); ``` 使用以上配置,Redux的状态将会被自动保存到本地存储中,并在应用程序重新加载时被恢复。你可以根据需要自行调整配置,例如设置存储引擎、存储的key等。详细的配置和更多高级用法,请参考redux-persist库的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值