Redux是什么?
Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。(Redux支持React,Angular、jQuery甚至纯JavaScript)
看下图理解一下
再看下官方的图
React Components就是我们操控的,我们先见到的是Action Creators请求 然后去Store里查看 用到Reducer去搜索然后拿来使用
为什么使用:
- 组件需要根据状态发生显示变化
- state并不总是以单向的方式线性流动
- 存在组件需要更新全局状态
- 存在组件需要更新另一个组件的状态
- 存在状态以许多不同的方式更新
- 状态树结构复杂
- 某个状态需要在全局使用或共享(例如角色权限等信息)
好了现在开始说怎么使用
写之前 先安装一下redux
npm install --save redux
1. 编写创建store仓库
在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。
index.js就是整个项目的store文件,打开文件,编写下面的代码。
import { createStore } from 'redux' // 引入createStore方法
const store = createStore() // 创建数据存储仓库
export default store //暴露出去
这样就建立好了仓库,但是现在乱,这时候就需要Reducers。这两个一定要一起创建出来,这样仓库才不会出现互怼现象。在store文件夹下,新建一个文件reducer.js,然后写入下面的代码。
const defaultState = {} //默认数据 后面可以根据自己的需求添加数据
export default (state = defaultState,action)=>{ //就是一个方法函数
return state
}
state: 是整个项目中需要管理的数据信息,这里我们没有什么数据,先用空对象来表示。
这reducer就建立好了,把reducer引入到store中,再创建store时,以参数的形式传递给store。
在store下的index里 加入Reducers.js
import reducer from './reducer'
const store = createStore(reducer) // 把reducer 放到数据存储仓库
2. 在store中为todoList初始化数据
仓库store和reducer都创建好了,可以初始化一下我们组件中的数据了,在reducer.js文件的defaultState对象中,加入自己想要的数据
const defaultState = { //根据自己的需要添加
inputValue : 'XXXXXXXX',
State_list:[
'1 redux的好处',
'2 怎么使用redux'
]
}
export default (state = defaultState,action)=>{
return state
}
3. 组件获得store中的数据
有了store仓库,也有了数据,那如何获得stroe中的数据那?你可以在要使用的组件中,先引入store。
我们组件要使用store,就在src/(你的组件).js文件夹中,进行引入。
import store from './store/index.js' //可以直接简写'./store'
然后在组件中获取用到constructor
constructor(props){
super(props)
console.log(store.getState()) //获取数据 我们在控制台中可以看到
this.state=store.getState(); //记得放到state里面
}
拿到数据了 就可以渲染我们的页面了