Redux Toolkit \u6781\u7b80\u793a\u4f8b\uff1aLet’s buy some ice-cream! \uff08Part 1\uff09<\/p>\n\n\n\n\n\n\n\n
npm install @reduxjs\/toolkit react-redux<\/code><\/pre><\/div>\n\n\n\n1.2 \u521b\u5efa Redux Store<\/strong><\/h3>\n\n\n\n\u521b\u5efa src\/store\/index.js<\/code> \u6587\u4ef6\u3002\u4ece Redux Toolkit<\/code> \u5f15\u5165 configureStore<\/code> API\u3002<\/p>\n\n\n\n\/\/ src\/store\/index.js\nimport { configureStore } from "@reduxjs\/toolkit";\n\nexport default configureStore({\n reducer: {},\n});<\/code><\/pre><\/div>\n\n\n\n1.3 \u4e3a React \u63d0\u4f9b Redux Store<\/strong><\/h3>\n\n\n\n\u521b\u5efa store \u540e\uff0c\u4fbf\u53ef\u4ee5\u5728 React \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u5b83\u3002 \u5728 src\/index.js<\/code> \u4e2d\u5f15\u5165\u6211\u4eec\u521a\u521a\u521b\u5efa\u7684 store , \u901a\u8fc7 React-Redux \u7684 <Provider><\/code> \u5c06 <App><\/code> \u5305\u88f9\u8d77\u6765,\u5e76\u5c06 store<\/code> \u4f5c\u4e3a prop \u4f20\u5165\u3002<\/p>\n\n\n\n\/\/ src\/index.js\n\/\/ ...\nimport store from '.\/store';\nimport { Provider } from 'react-redux';\n\n\/\/ ...\n <Provider store={store}>\n <App \/>\n <\/Provider>\n\/\/ ...<\/code><\/pre><\/div>\n\n\n\n1.4 \u521b\u5efa Redux State Slice<\/strong><\/h3>\n\n\n\n\u521b\u5efa src\/store\/reducers<\/code> \u6587\u4ef6\u5939\u3002\u5e76\u5728\u8be5\u6587\u4ef6\u5939\u4e0b\u6839\u636e\u4e1a\u52a1\u903b\u8f91\u521b\u5efa\u4e0d\u540c\u7684 Redux State Slice\u3002<\/p>\n\n\n\n\u5728\u672c\u6848\u4f8b\u4e2d\uff0c\u6211\u4eec\u5c06\u5728\u8be5\u6587\u4ef6\u5939\u4e0b\u521b\u5efa money.js<\/code> \u548c icecream.js<\/code> \u4e24\u4e2a Slice \u6587\u4ef6\u3002\u4ee5\u4e0b\u5185\u5bb9\u4ee5 money.js<\/code> \u4e3a\u4f8b\uff1a<\/p>\n\n\n\n1.4.1 \u5f15\u5165 createSlice<\/strong><\/h4>\n\n\n\n\/\/ src\/store\/reducers\/money.js\n\nimport { createSlice } from "@reduxjs\/toolkit";<\/code><\/pre><\/div>\n\n\n\n1.4.2 \u521b\u5efa Slice<\/strong><\/h4>\n\n\n\n\u521b\u5efa slice \u9700\u8981\u4e00\u4e2a\u5b57\u7b26\u4e32\u540d\u79f0 name<\/code> \u6765\u6807\u8bc6\u5207\u7247\u3001\u4e00\u4e2a\u521d\u59cb state initialState<\/code> \u4ee5\u53ca\u4e00\u4e2a\u6216\u591a\u4e2a\u5b9a\u4e49\u4e86\u8be5\u5982\u4f55\u66f4\u65b0 state \u7684 reducer \u51fd\u6570\u3002<\/p>\n\n\n\n\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06 name<\/code> \u8bbe\u7f6e\u4e3a \"money\"<\/code>, \u5e76\u5728 initialState<\/code> \u4e2d\u8bbe\u7f6e value: 0<\/code>\u3002<\/p>\n\n\n\n\u8bb0\u5f97\u5728 const moneySlice<\/code> \u524d\u6dfb\u52a0 export<\/code> \u5173\u952e\u5b57\u4ee5\u66b4\u9732\u8fd9\u4e2aslice\u3002<\/p>\n\n\n\n\/\/ src\/store\/reducers\/money.js\n\nimport { createSlice } from "@reduxjs\/toolkit";\n\nexport const moneySlice = createSlice({\n name: "money",\n initialState: {\n value: 0\n },\n reducers:{\n \/\/ ...\n },\n})<\/code><\/pre><\/div>\n\n\n\n1.4.3 \u7f16\u5199 case reducer \u51fd\u6570<\/strong><\/h4>\n\n\n\n\u5728 money.js<\/code> \u4e2d\uff0c\u6211\u4eec\u9700\u8981\u4e24\u4e2a case\uff1aincrement<\/code> \u548c decrement<\/code> \uff0c\u5206\u522b\u7528\u4e8e\u589e\u52a0\u548c\u51cf\u5c11 value<\/code> \u7684\u503c\uff1a<\/p>\n\n\n\n\/\/ src\/store\/reducers\/money.js\n\n\/\/ ...\n \/\/ ...\n reducers:{\n increment: (state) => {\n state.value += 5;\n },\n decrement: (state) => {\n state.value -= 5;\n },\n },<\/code><\/pre><\/div>\n\n\n\n1.4.4 \u5bfc\u51fa Action Creaters \u548c reducer<\/strong><\/h4>\n\n\n\n\u6bcf\u4e2a case reducer \u51fd\u6570\u4f1a\u751f\u6210\u5bf9\u5e94\u7684 Action creators\u3002\u6700\u540e\uff0c\u5bfc\u51faAction Creaters \u548c reducer\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\/\/ src\/store\/reducers\/money.js\n\n\/\/...\nexport const { increment, decrement } = moneySlice.actions;\nexport default moneySlice.reducer;<\/code><\/pre><\/div>\n\n\n\n1.5 \u5c06 Slice Reducers \u6dfb\u52a0\u5230 Store \u4e2d<\/strong><\/h3>\n\n\n\n\u5728 src\/store\/index.js<\/code> \u4e2d\u5f15\u5165 Slice Reducers\u3002\u7136\u540e\uff0c\u5c06\u5176\u6dfb\u52a0\u5230 Store\u4e2d\uff1a<\/p>\n\n\n\n\/\/ src\/store\/index.js\n\nimport { configureStore } from "@reduxjs\/toolkit";\nimport moneyReducer from ".\/reducers\/money"; \/\/ \u5f15\u5165moneyReducer \uff08*1.5\uff09\n\nexport default configureStore({\n reducer: {\n money: moneyReducer, \/\/ \u5c06moneyReducer\u52a0\u5165\u5230store\u4e2d\n },\n});<\/code><\/pre><\/div>\n\n\n\n1.6 \u5728 React \u7ec4\u4ef6\u4e2d\u4f7f\u7528 Redux \u72b6\u6001\u64cd\u4f5c<\/strong><\/h3>\n\n\n\n\u4f7f\u7528 useSelector<\/code> \u4ece store \u4e2d\u8bfb\u53d6\u6570\u636e\uff0c\u4f7f\u7528 useDispatch<\/code> \u6765 dispatch actions\u3002<\/p>\n\n\n\n1.6.1 \u5f15\u5165 useSelector \u548c useDispatch<\/strong><\/h4>\n\n\n\n\u5728 App.js<\/code> \u4e2d\uff0c\u4ece react-redux<\/code> \u4e2d\u5f15\u5165 useSelector<\/code> \u548c useDispatch<\/code>\u3002<\/p>\n\n\n\n\/\/ src\/App.js\n\nimport { useSelector, useDispatch } from 'react-redux';\n\n\/\/ ...<\/code><\/pre><\/div>\n\n\n\n1.6.2 \u4ece store \u4e2d\u8bfb\u53d6\u6570\u636e<\/strong><\/h4>\n\n\n\n\u5728 const App<\/code> \u4e2d\uff0c\u4f7f\u7528 useSelector<\/code> \u8bfb\u53d6 store \u4e2d money<\/code> \u7684\u503c\uff0c\u5e76\u5c06\u5176\u653e\u5728\u5bf9\u5e94\u7684\u4f4d\u7f6e\u3002<\/p>\n\n\n\n\/\/ src\/App.js\n\n\/\/ ...\nconst App = () => {\n const money = useSelector((state) => state.money.value); \/\/ \u4ecestore\u4e2d\u83b7\u53d6money\u7684\u503c\n return (\n <div className="App">\n Money: {money}$ \n <button>+<\/button> <button>-<\/button> <br \/>\n {\/* ... *\/}\n <\/div>\n );\n}\n\/\/ ...<\/code><\/pre><\/div>\n\n\n\n1.6.3 Dispatch Actions<\/strong><\/h4>\n\n\n\n\u4f7f\u7528 useDispatch<\/code> \u5728\u5bf9\u5e94 Button<\/code> \u6309\u4e0b\u65f6\u589e\u52a0\u6216\u51cf\u5c11 Money \u7684\u503c\u3002<\/p>\n\n\n\n\/\/ src\/App.js\n\n\/\/ ...\nimport { increment, decrement } from '.\/store\/reducers\/money'; \/\/ \u5f15\u5165 increment \u548c decrement action\n\/\/ ...\n\nconst App = () => {\n \/\/ ...\n const dispatch = useDispatch(); \/\/ \u83b7\u53d6dispatch\u65b9\u6cd5 \n return (\n <div className="App">\n Money: {money}$\n {\/* \u4f7f\u7528useDispatch\u5728\u5bf9\u5e94Button\u6309\u4e0b\u65f6\u89e6\u53d1\u5bf9\u5e94\u7684action *\/}\n <button onClick={() => dispatch(increment())}>+<\/button>\n <button onClick={() => dispatch(decrement())}>-<\/button> <br \/>\n\n {\/* ... *\/}\n <\/div>\n );\n}<\/code><\/pre><\/div>\n\n\n\n\u73b0\u5728\uff0c\u4f60\u53ef\u4ee5\u5728\u9875\u9762\u4e0a\u70b9\u51fb\u201c+\u201d\u3001\u201c-\u201d\u6309\u94ae\u65f6\u770b\u5230Money\u7684\u503c\u5728\u53d8\u5316\u4e86\uff01<\/p>\n\n\n\n
\u4ee5\u4e0a\u5185\u5bb9\u7684\u5b8c\u6574\u4ee3\u7801\u5728\u672c\u9879\u76ee\u7684 ChapterOne \u5206\u652f<\/a>\u3002<\/p>\n\n\n\n \n","protected":false},"excerpt":{"rendered":"