本文共 2525 字，大约阅读时间需要 8 分钟。

redux用于react中的状态管理，其中不能直接修改redux中的状态，需要通过dispatch方法才能修改react中的状态。

createStore函数中存放着状态信息state，它的执行结果返回一个store对象，返回的对象包含：

getState(获取store中的state状态信息，但是不能直接修改store中的state信息)

dispatch(修改store中的state信息) subscribe(用于订阅事件) <div>     <div id="title"></div>     <div id="content"></div> </div> <script>     function createStore(reducer) {         // 定义store对象中的状态信息对象，此处必须是只定义不赋值，因为这样在下面的dispatch初始化state时才能使用默认值初始化state         let state;         // listener是一个事件池，存储订阅的方法         let listener = [];         // 在createStore作用域下创建getState函数，该函数需要返回一个新对象，该对象需要和state一样。这个方法只用于获取state         // 深克隆：将当前作用域下的state深克隆一份，让外界利用这个方法只能获取state不能修改state         let getState = () => JSON.parse(JSON.stringify(state));         // 定义修改state的函数dispatch。action中的type一般是const大写的常量         function dispatch(action) {             state = reducer(state,action);             // 在dispatch中执行订阅的方法             listener.forEach((item,index)=>{                 if(typeof item==="function"){                     item();                 }             });         }         // 这个函数的执行是在初始化state对象         dispatch({});         // 在createStore中有一个订阅方法subscribe，该函数返回取消订阅的函数         let subscribe = (fn)=>{             listener.push(fn);             // 返回取消订阅的方法，当返回值执行时就会取消该订阅             return ()=>{                 listener = listener.filter(item=>item!==fn);             };         };         return {             getState, dispatch,subscribe         };     }     let initState = {         title: { color: 'red', text: '你好' },         content: { color: 'yellow', text: '中国' }     };     const CHANGE_TITLE_TEXT = "CHANGE_TITLE_TEXT";     const CHANGE_CONTENT_COLOR = "CHANGE_CONTENT_COLOR";     function reducer(state = initState, action) {         switch (action.type) {             case CHANGE_TITLE_TEXT:                 // 当解构出现重名，后面覆盖前面                 return { ...state, title: { ...state.title, text: action.text } };             case CHANGE_CONTENT_COLOR:                 return { ...state, content: { ...state.content, color: action.color } };             default:                 return state;         }     }     let store = createStore(reducer);     // 数据渲染title、content     function renderTile() {         let title = document.getElementById("title");         title.innerHTML = store.getState().title.text;         title.style.color = store.getState().title.color;     }     function renderContent() {         let content = document.getElementById("content");         content.innerHTML = store.getState().content.text;         content.style.color = store.getState().content.color;     }     function renderApp() {         renderTile();         renderContent();     }     renderApp();     // redux中规定，不能直接修改state中的数据，必须通过dispatch来修改state中的数据     let f = store.subscribe(renderApp);     // f();//这个方法执行就会取消订阅的方法     setTimeout(() => {         store.dispatch({ type: CHANGE_TITLE_TEXT, text: '加油' });         store.dispatch({ type: CHANGE_CONTENT_COLOR, color: 'black' });         // renderApp();     }, 3000); </script>

————————————————

版权声明：本文为CSDN博主「fengyezi159」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u010510187/article/details/101557187