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

相关文章
|
5天前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
64 0
|
3天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
5天前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
5天前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
18 0
|
5天前
|
JavaScript 前端开发
React结合Redux实现Todolist
React结合Redux实现Todolist
19 0
|
9月前
|
前端开发 JavaScript
【React工作记录八十】 一步步教你用taro封装一个公司库的下拉组件
【React工作记录八十】 一步步教你用taro封装一个公司库的下拉组件
61 0
|
10月前
|
存储 JavaScript 前端开发
【React】redux和React-redux
redux和React-redux
67 0
|
7月前
|
前端开发 JavaScript 容器
React的魅力: React-Router-集中式管理和Redux-核心概念
React的魅力: React-Router-集中式管理和Redux-核心概念
47 1
|
8月前
|
JavaScript 前端开发 中间件
React(六) —— redux
React(六) —— redux
|
8月前
|
JavaScript 前端开发 算法

热门文章

最新文章