5. 环境安装
学习的时候可以对比着
vuex学习
安装指令
cnpm i -S redux
store公共存储区域
src/store/index.js
6. 完整的流程代码逻辑
6.1 典当掌柜 /管理员 创建
import { createStore } from 'redux' // 引入一个第三方的方法 const store = createStore() // 创建数据的公共存储区域（管理员）
6.2 账本,记录
创建一个记录本去辅助管理数据，也就是
reduecer，本质就是一个函数，接收两个参数
state，action，返回state
let defaultState = { counter:0 } function reducer(state = defaultState,action) {}
6.3可以将记录本传递给store，两者建立连接
const store = createStore(reducer)
6.4 拿到自己想要的 比如典当后的money
获取store里面的数据，则通过store.getState()来获取当前state
console.log(store.getState());
7. 更改 store数据
- 通过
dispatch来派发action,通常action中都会有type属性，也可以携带其他的数据一定要会类比学习 ,会
vuex的 想着vuex,了解其他状态管理的也可以 类比
其实
vuex本身也借鉴了redux,
store.dispatch({ type: "INCREMENT" }) store.dispath({ type: "DECREMENT" }) store.dispatch({ type: "ADD_NUMBER", number: 5 })
8. 修改reducer中的处理逻辑
const reducer = (state = initialState, action) => { switch (action.type) { case "INCREMENT": return {...state, counter: state.counter + 1}; case "DECREMENT": return {...state, counter: state.counter - 1}; case "ADD_NUMBER": return {...state, counter: state.counter + action.number} default: return state; } }
注意
reducer是一个纯函数，不需要直接修改state
2.这样派发action之后，既可以通过store.subscribe监听store的变化
subscribe监听 变化
store.subscribe(() => { console.log(store.getState()); })
9. 完整代码如下
// 存储器：用来管理状态（获取状态 、修改状态） 管理员 import { createStore } from 'redux' // 初始状态 let defaultState = { counter:0 } // redux的核心配置，中间处理器 ，记录状态的改变 function reducer(state = defaultState,action) { console.log("reducer 执行了",action); switch (action.type) { case "A": { // 不修改state let tempState = JSON.parse(JSON.stringify(state)) // 修改 tempState.counter = tempState.counter + action.value // 返回修改后的状态 return tempState } case "B": { //非标准写法 // 修改状态 state.counter = state.counter - 1 return state } default: { console.log("default",state); return state } } } // 创建 Redux store 来存放应用的状态。 // 需要状态配置信息参数（状态的初始值，以及修改状态的方法） // 调用createStore的时候,reducer会被默认执行一次,完成对状态的初始化(执行里面的default) let store = createStore(reducer)
永远不要在 reducer 里做这些操作
1.修改传入参数；
2.执行有副作用的操作，如 API 请求和路由跳转；
3.调用非纯函数，如 Date.now() 或 Math.random()
10.监听状态的改变
10.1三大原则
- 单一数据源
整个应用的state被存储在一一棵object tree 中,并且这个object tree 中只存在唯一一个的store中.- state是只读的
唯一改变state的方式就是除非action,action是一个用于描述已发生事件的普通对象- 使用纯函数来执行修改
为了描述action 如何改变state tree,你需要编写reducers
10.2 简易写法
//vue这样写的 借鉴的就是redux // let store = createStore({ // state:{}, // mutations:{} // }); var n = 0 // 返回值 let unsubscribe = store.subscribe(() => { n++ console.log(n,"--------------状态改了 ,我知道了哦") }) // 一般在组件销毁的时候使用 unmounted unsubscribe() // 修改状态 // store.dispatch({type:"A"}) // store.dispatch({type:"A"}) store.dispatch({type:"B"}) store.dispatch({type:"A",value:10}) // 获取状态 console.log("-----------获取状态", store.getState());
11.引用
//入口index.js 引入 import "./store"
12. 总结
1.
createStore可以帮助创建store2.
store.dispatch帮助派发action,action会传递给store3.
store.getState这个方法可以帮助获取store里边所有的数据内容4.
store.subscrible方法订阅store的改变，只要store发生改变5.
store.subscrible这个函数接收的这个回调函数就会被执行
