关于redux:想了解关于-Redux-的这里都有
一、Redux 外围官网是这样解释Redux的:JavaScript 状态容器,提供可预测化的状态治理。 const state = { modleOpen: "yes", btnClicked: "no", btnActiveClass: "active", page: 5, size: 10}Redux 外围概念及工作流程store: 存储状态的容器,JavaScript对象View: 视图,HTML页面Actions: 对象,形容对状态进行怎么的操作Reducers: 函数,操作状态并返回新的状态Redux 计数器案例 ../Redux/src/counter <body> <button id="plus">+</button> <span id="count">0</span> <button id="minus">-</button><script src="https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js"></script><script> // 3 存储默认状态 let initialState = { count: 0 } // 2 创立 reducer 函数 function reducer (state = initialState, action) { // 7 接管 action 并判断 action 的类型 switch (action.type) { case 'increment': return {count : state.count + 1} case 'decrement': return {count : state.count - 1} default: // 初始化是会主动发送一个 init 的 action 用来存储默认的state return state; } } // 1 创立 store 对象, createStore 有第二个参数代表默认值,也就是 reducer 中的 state 参数 let store = Redux.createStore(reducer); // 4 定义 action let increment = { type: 'increment' } let decrement = { type: 'decrement' } // 5 获取按钮并增加事件 document.getElementById('plus').onclick = function() { // 6 触发action store.dispatch(increment); } document.getElementById('minus').onclick = function () { store.dispatch(decrement); } // 8 订阅 store,当store发生变化的时候会执行回调 store.subscribe(() => { // 获取 store 中存储的状态 console.log(store.getState()) document.getElementById('count').innerText = store.getState().count; });</script></body>Redux外围APIconst store = Redux.crateStore(reducer): 创立 Store 容器function reducer (state = initialState, action) {}: 创立用于解决状态的 reducer 函数store.getState(): 获取状态store.subscribe(function(){}): 订阅状态store.dispatch({type: 'discription...'}): 触发action二、React + Redux1.在 React 中不应用 Redux 时遇到的问题在 React 中组件通信的数据流是单向的,顶层组件能够通过props属性向上层组件传递数据,而上层组件不能向下层组件传递数据,要实现上层组件批改数据,须要下层组件传递批改数据办法到上层组件,当我的项目越来越大的时候,组件之间传递数据也就变得越来越艰难。 ...