写一个简单的 redux

1.在src中创建一个store文件夹

2.创建一个index.ts 代码如下:

// 创建 store 仓库

import { createStore } from 'redux' // 引入 createStore 方法
import reducer from './reducer' // 创建好后引入

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

export default store

3.创建一个reducer.ts 代码如下:

// 管理仓库能力模块

const defaultState = {
  pane: [
    { title: 'Home', content: 'Home', key: '1' },
    { title: 'Tab 1', content: 'Content of Tab 1', key: '2' },
    { title: 'Tab 2', content: 'Content of Tab 2', key: '3' }
  ] // 这就相当于你给Store里增加了一个新的数据项
} // 默认数据
// state 是整个项目中需要管理的数据信息, 这里我们没有数据, 所以用空对象来表示
export default (state = defaultState, action: any) => { // 就是一个方法函数
  return state
} 

4.使用

import store from '../../../store'

在 constructer 里面:

const state = store.getState()
console.log(state)

可以打印出我们写入的数据

5.向redux里面的pane 加一项数据
1⃣️ 要向定义一下我们即将要加进去的值
2⃣️ 在要使用的地方引入store 重新赋值就可以了

3⃣️ 这时我们会发现当我们要 使用的时候 会报错 原因是因为我这里使用的是typescript , 如果你没有使用 ts, 而是用的js, 就不会出现这个问题
解决办法:
我们在reducer.ts 里面声明 一下 我们放进去的数据类型
? 代表不强制 传递此参数使用
| 代表只允许使用你规定的
如下图 Array< item > 代表不强制使用 item 里面的每一项