2021-04-14 redux

Redux

1. 将flux与函数式编程结合在一起, 对于flux的系统架构的实现

2. Redux使用场景
   - 简单来说, 如果ui层比较简单, 没有很多的交互, Redux就是不必要的, 用了反而会增加复杂性
   - 用户的使用方式很简单
   - 用户之间没有协作
   - 不需要与服务器大量的交互, 也没有使用webSocket
   - 视图层只从单一的来源获取数据
   - 需要使用redux的场景
   - 用户的使用方式复杂
   - 不同身份的用户有不同的使用方式
   - 多个用户之间可以协作
   - 一个组件需要去改变另一个组件的状态
   - flux redux 都不是必须和react配合使用的, 因为flux和redux是完整的架构, 在学习react的时候, 只是将react的组件作为redux中的视图层去使用了而已

3. 设计思想
   - web应用是一个状态机, 视图与状态是一一对应的
   - 所有的状态保存在一个对象里(唯一的数据源)

4. Redux的使用原则
   - Single Source Of Truth 唯一的数据源
   - State is read-only 状态是只读的
   - Changes are made with pure function 数据的改变必须通过纯函数来完成

5. Redux原理

       const defaultState = {
           count: 0
       };
   
       const changeState = (action) => {
           switch (action.type) {
               case 'increment'
                   defaultState.count += 1;
           }
       }
   
       const renderDom = () => {
           document.querySelector('#app').innerHTML = defaultState.count;
       }
   
       const dispatch = (action) => {
           changeState(action)
           renderDom();
       }
   
       <button onClick={() => dispatch({ type: 'increment'})}>+</button>   
   

6. store

       import { state, changeState } from './changeState'
   
       // store
       const createStore = () => {
           const render = (state) => {
   
           }
   
           const dispatch = (action) => {
               changeState(action);
               render(state)
           }
   
           return {
               dispatch
           }
       }
   
       const store = createStore()
   
       export default store;
   
   
       <button onClick={() => store.dispatch({ type: 'increment' })} />
   

       import { state, changeState } from './changeState'
   
       // store
       const createStore = () => {
   
           const getState = () => {
               return state;
           }
   
           // 观察者模式
           const listeners = [];
           
           const subscribe = func => {
               listeners.push(func)
           }
   
           const dispatch = (action) => {
               changeState(action);
               listeners.forEach((fn) => fn());
           }
   
           return {
               dispatch
           }
       }
   
       const render = (state) => {
           store.getState().count
       }
   
   
       const store = createStore()
   
       store.subscribe(render);
       // 可以订阅多个
       // store.subscribe(render);
   
       export default store;
   

       const changeState = (state = defaultState, action) => {
           switch (action) {
               case 'increment': {
                   return {
                       ...state,
                       count: state.count + 1
                   }
               }
           }
       }
   
       // 在reducer文件里
       let state = {};
   
       const dispatch = ()=> {
           state = changeState(state, action);
           listeners.forEach((fn) => fn())
       }
   

7. Redux

       const { createStore } = require('redux');
   
       const reducer = require('./reducer')
   
       const store = createStore(reducer);// { dispatch, subscribe, setState, replaceReducer }
   
       store.dispatch({ type: 'increment' })
   
       console.log(store.getState())
   
       // 订阅变化, 只要store里面的state发生了变化, 就会执行
       store.subscribe(() => {
           console.log('store里面的state发生了变化')
       })
   
   

       // reducer.js
       const defaultState = {
           count: 0
       }
   
       const reducer = (state = defaultState, action) => {
           switch (aciton.type) {
               case 'increment':
                   return {
                       ...state,
                       count: state.count + 1
                   }
               default:
                   return state;
           }
       }
   
       module.exports = reducer;