react 使用Redux Toolkit

从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官网

react 使用Redux Toolkit

猜你喜欢