Taro+React Redux最简单最简单的使用方法

简介: React Redux最简单最简单的使用方法

貌似和Taro没啥关系....

我这边就不多介绍乱七八糟的属性条件了,有兴趣的去仔细翻阅官方文档或阮一峰的讲解。

我也是第一次用Redux,感觉有很多的错误我没发现。但是能正常的 修改+读取。

首先在src文件目录下创建 store文件夹,新建两个文件分别为index.js & reducers.js

接下来你需要做的是:
Ctrl + C
Ctrl + V 哈哈

index.js

import { createStore } from 'redux'
import reducer from './reducers'

const store = createStore(reducer) // 创建数据存储仓库
export default store   

reducers.js

const defaultState = {
  appid: '数据·1',
  cookis: ''
}
console.log(defaultState, 'defaultState');
function fn (state = defaultState, action) {
  state = JSON.parse(JSON.stringify(state)) //深度

  switch (action.type) {
    case "setVisibilityFilter":
      state = {
        ...defaultState,
        ...action.state
      }
      return state;
    default:
      return state;
  }

}

const state = fn
export default state

使用方法

`import store from './store'
`

读取

console.log(store.getState());

修改

const action = { type: "setVisibilityFilter", state: { cookis: 'a1sd54a5wd654s' } }
store.dispatch(action)

[同步CSDN]

相关文章
|
17天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
28 0
|
2月前
|
JavaScript 前端开发 开发者
React 的正确使用方法:ref 篇
你真的用对了 useRef 吗?在与 TypeScript 一起使用、以及撰写组件库的情况下,你的写法能够避开以下所有场景的坑吗?
|
16天前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
28 3
|
27天前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
28天前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
28天前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
30天前
|
存储 JavaScript 前端开发
|
30天前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
28 1
|
3月前
|
存储 JavaScript 前端开发
React中使用redux
React中使用redux
134 56
|
24天前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
17 0