Redux的理解与使用
Redux的理解与使用
一.什么是Redux？
Redux是一个第三方状态管理的js库，它不仅仅可以适用于react框架，还可以用于其他的vue，auglar等框架。只不过react的生态中不包括一个状态管理的库而已，所以与react配合使用较为好。
二.神魔时候要使用Redux来管理状态
当我们多个组件共享状态的时候最好使用Redux来管理，方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux
二.Redux的三个核心要素
1. actions
actions可以说是一个让reducer执行不同函数的supporter， 它为reducer传入type来让reducer来执行不同的修改数据方式，并且把data传给reducer。所以actions的类型要是一个对象，并且咱们可以把actions抽离出去封装到一个工厂函数中如下：
/*./redux/actions.js*/
export const increament = (num)=> {
return {
type: 'INCREAMENT', //type属性由于要跟reducer中的相同所以我们可以把它抽离出去./redux/actions-type.js
data: num
}
}
2.reducer
reduce是一个返回state的纯函数，里头要对state的值进行处理。
/*./redux/reducer.js*/
export default count = (state=0, action)=> { //state需要在这里直接赋予默认值，因为每个状态都有初始状态
switch (action.type) {
case "INCREMENT":
return state + 1
default:
return state
}
}
3.Store
store是一个连接state，reducer的仓库，其中提供了三种api供我们来操作
- store.getState() : 用来获取仓库中数据，返回state
- store.dispitch(action): 用来调用reducer来修改state， action需要传入的类型是一个对象
- store.subscribe(()=> {}): 当store中的数据改变时会进行调用， 由于store中数据改变不会使页面重新渲染，所以我们在入口文件中可以把reactDom.render（）放入其中来实现类似于数据响应式的作用。
/*./redux/store.js*/
import {createStore} from 'redux'
import reducer from './reducer.js/
export const count = createStore(reducer)
//然后在index.js的入口文件中引入，通过属性赋值传递给需要的组件
版权声明：本文为jackson1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。