东莞加盟网站建设,网站搭建制作,平台电商运营,wordpress安装后空白页核心思想#xff1a;单一数据源、状态是只读的、以及使用纯函数更新状态。
组成部分
Store#xff08;存储#xff09;
应用的唯一状态容器#xff0c;存储整个应用的状态树,使用 createStore() 创建。
getState()#xff1a;获取当前状态。dispatch(action)#xff…核心思想单一数据源、状态是只读的、以及使用纯函数更新状态。
组成部分
Store存储
应用的唯一状态容器存储整个应用的状态树,使用 createStore() 创建。
getState()获取当前状态。dispatch(action)派发动作以触发状态更新。subscribe(listener)订阅状态变化。
Action动作
描述应用中发生的事情就是一个普通的 JavaScript 对象必须有 type 属性用来描述动作的类型其他字段可以包含任何附加信息例如payload。
Reducer状态处理器
是一个纯函数接收当前的状态和一个动作返回新的状态函数签名(state, action) newState,通过处理不同类型的动作更新状态。
Middleware中间件
拦截 dispatch 的动作用于扩展 Redux 的功能例如处理异步操作redux-thunk或日志记录redux-logger。
ProviderReact 集成部分
使用 react-redux 提供 Provider 组件将 Redux 的 store 传递给整个 React 组件树。
应用 安装依赖
npm install redux react-redux创建 Redux Store
定义Action
// src/actions/types.js
// 定义一些常量来表示 action 的类型这有助于避免拼写错误
export const INCREMENT INCREMENT;
export const DECREMENT DECREMENT;// src/actions/counterActions.js
// 创建 action creator 函数来生成 action 对象。
import { INCREMENT, DECREMENT } from ./types;export const increment () ({type: INCREMENT,
});export const decrement () ({type: DECREMENT,
});创建 Reducer
// src/reducers/counterReducer.js
// 创建 reducer 函数来处理不同的 action 类型。
import { INCREMENT, DECREMENT } from ../actions/types;const initialState {count: 0,
};function counterReducer(state initialState, action) {switch (action.type) {case INCREMENT:return {...state,count: state.count 1,};case DECREMENT:return {...state,count: state.count - 1,};default:return state;}
}export default counterReducer;// src/reducers/index.js
import { combineReducers } from redux;
import counterReducer from ./counterReducer;const rootReducer combineReducers({counter: counterReducer,
});export default rootReducer;创建 Store
// store.js
import { createStore } from redux;
import counterReducer from ./reducer;const store createStore(counterReducer);export default store;在 React 应用中使用 Redux
设置 Provider
// index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
// Provider是React-Redux提供的一个组件用于将Redux store传递给应用中的所有组件。
import { Provider } from react-redux;
import store from ./store/index;
import reportWebVitals from ./reportWebVitals;const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeProvider store{store}{ }{/* 将App组件包裹在Provider中 */}App //Provider/React.StrictMode
);
reportWebVitals();组件中访问状态和派发动作
// src/components/js/CounterWithHooks.js
import React from react;
import { useSelector, useDispatch } from react-redux;
import { increment, decrement } from ../../actions/counterActions;function CounterWithHooks() {const count useSelector((state) state.counter.count);const dispatch useDispatch();return (divh1Count: {count}/h1button onClick{() dispatch(increment())}Increment/buttonbutton onClick{() dispatch(decrement())}Decrement/button/div);
}export default CounterWithHooks;Redux 中间件的扩展
添加异步支持redux-thunk
npm install redux-thunk修改 store.js
import { createStore, applyMiddleware } from redux;
import {thunk} from redux-thunk;// 使用命名导出
// import thunk from redux-thunk;// 使用默认导出
import counterReducer from ./reducer;const store createStore(counterReducer, applyMiddleware(thunk));export default store;示例异步 Action
// src/actions/counterActions.js
// 创建 action creator 函数来生成 action 对象。
import { INCREMENT, DECREMENT } from ./types;
export const increment () ({type: INCREMENT,
});export const decrement () ({type: DECREMENT,
});export const incrementAsync () {return (dispatch) {setTimeout(() {dispatch(increment());}, 1000);};
};export const decrementAsync () {return (dispatch) {setTimeout(() {dispatch(decrement());}, 1000);};
};
示例
// src/components/js/CounterWithHooks.js
import React from react;
import { useSelector, useDispatch } from react-redux;
import { increment, decrement, incrementAsync, decrementAsync } from ../../actions/counterActions;function CounterWithHooks() {const count useSelector((state) state.counter.count);const dispatch useDispatch();return (divh1Count: {count}/h1button onClick{() dispatch(increment())}Increment/buttonbutton onClick{() dispatch(decrement())}Decrement/buttonbutton onClick{() dispatch(incrementAsync())}Increment Async/buttonbutton onClick{() dispatch(decrementAsync())}Decrement Async/button/div);
}export default CounterWithHooks; 总结
State: 整个应用的状态树。Actions: 描述状态变化的对象。Reducers: 纯函数根据 action 更新 state。Store: 持有应用的 state 树提供方法来获取 state、分发 action 和注册/注销监听器。
