react uses Redux Toolkit

From reducer to redux to react-redux☹☹ is now Redux Toolkit.

Install:

npm install @reduxjs/toolkit react-redux

        First, we create a slice and introduce createSlice to define the slice. The name in the slice is the key identifier, and you can name it casually. It should not be the same as the name of other slices. It is recommended to use the same name so as not to mess up.

        initialState is equivalent to the state value of the component, move the state value of the component here to define. The reducers define some methods for operating state values, as follows: I define three methods of increase, decrease, and reset, and finally export the slice reducer and the slice method.

A_Sclice.js file:

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

---

 

Next, we create another store.js file and import the slice just now into the store.js file. Note that A_Reducer_State is named casually and needs to correspond to when the state value is obtained later.

store.js：

import { configureStore } from '@reduxjs/toolkit'
import A_Reducer from './A_Slice'
export default configureStore({
  reducer: {
    A_Reducer_State:A_Reducer
  }
})

---

Then we import store.js in the root file and wrap the root component.

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 >
);

---

Finally, we use it in the component:

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;

 As you can see, we have successfully used slice states and methods:

 

Next, we define a subcomponent at will, just copy and paste:

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;

 

It can be seen that the parent-child components have successfully achieved state sharing.

More detailed advanced usage:  redux official website