从reducer到redux到react-redux☹☹现在已经是Redux Toolkit了。
安装:
npm install @reduxjs/toolkit react-redux
首先我们创建一个切片,在里面引入了createSlice来定义切片。切片里边的name是key标识随便命名,不要与其它切片的name一样就行了,建议还是取一样的名字才不会乱套。
initialState相当于组件的状态值,把组件的状态值移到这里来定义。reducers里面则是定义一些对于状态值操作的方法,如下:我定义了增加、减少、重置的三个方法,最后将切片的reducer和切片的方法导出去。
A_Sclice .js文件:
import { createSlice } from '@reduxjs/toolkit'
export const A_Sclice = createSlice({
name: '你看我随不随便命名就完事了',
initialState: {
value: 0
},
reducers: {
add: state => {
state.value += 1
},
subtract: state => {
state.value -= 1
},
reset: (state, action) => {
state.value = action.payload
}
}
})
export const { add, subtract, reset } = A_Sclice.actions
export default A_Sclice.reducer
接下来,我们再创建一个store.js文件,把刚才的切片导入store.js文件。注意A_Reducer_State这个是随便命名的,需要与后面获取状态值时相对应。
store.js:
import { configureStore } from '@reduxjs/toolkit'
import A_Reducer from './A_Slice'
export default configureStore({
reducer: {
A_Reducer_State:A_Reducer
}
})
然后我们在根文件中,将store.js导入进来,把根组件给包裹起来。
index.js:
import store from './store'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode >
);
最后,我们在组件中去使用:
import { useSelector, useDispatch } from 'react-redux'
import { add, subtract, reset } from './A_Slice'
function App() {
const count = useSelector(state => state.A_Reducer_State.value)
const dispatch = useDispatch()
return (
<div className="App">
<div>
父组件:{count}
<button onClick={() => dispatch(add())}>添加</button>
<button onClick={() => dispatch(subtract())}>减少</button>
<button onClick={() => dispatch(reset(0))}>重置</button>
</div>
</div>
);
}
export default App;
可以看到,我们已经成功地使用到了切片的状态和方法:
接下来,我们随便定义一个子组件,复制粘贴就行:
import { useSelector, useDispatch } from 'react-redux'
import { add, subtract, reset } from './A_Slice'
function App() {
const count = useSelector(state => state.A_Reducer_State.value)
const dispatch = useDispatch()
return (
<div className="App">
<div>
父组件:{count}
<button onClick={() => dispatch(add())}>添加</button>
<button onClick={() => dispatch(subtract())}>减少</button>
<button onClick={() => dispatch(reset(0))}>重置</button>
</div>
<Child/>
</div>
);
}
function Child() {
const count = useSelector(state => state.A_Reducer_State.value)
const dispatch = useDispatch()
return (
<div>
<hr/>
子组件:{count}
<button onClick={() => dispatch(add())}>添加</button>
<button onClick={() => dispatch(subtract())}>减少</button>
<button onClick={() => dispatch(reset(0))}>重置</button>
</div>
)
}
export default App;
可以看到,父子组件已经成功实现了状态共享。
更多详细高级用法: redux官网