是否可以在React组件之外使用Redux Toolkit监听reducer状态变化？

Question

例如，我有以下 RTX 设置：

export interface UserState {
  name: string
}

const initialState: UserState = {
  name: '',
}

const slice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUserName: (state, action: { payload: string}) => {
      state.name = action.payload
    }
  },
})

export const { setUserName } = slice.actions
export default slice.reducer

export const store = configureStore({
  reducer: {
    user: userReducer,
  }
})

我知道我可以使用

store.subscribe(() => {
    const currentState = store.getState() 
})

但这对于商店中的所有减速机都是如此。我只想听用户减速器的名称状态。可以吗？

Answer 1

//Add following code
export const selectUsername = state => state.user;

export const { setUserName } = slice.actions
export default slice.reducer

使用使用选择器

const username = useSelector(selectUsername).name;

您将能够获取用户名