我需要访问登录时最初存储在 redux 商店中的用户信息..我该怎么做？ React-redux

Question

authReducer.js

import {
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  REGISTER_SUCCESS,
  REGISTER_FAIL
} from '../Actions/types';


export default (state = { isLoading: true, user: [] }, action) => {
  switch(action.type){
    case LOGIN_SUCCESS:
      localStorage.setItem('token',action.payload.token);
      return {
        ...state,
        user: action.payload.data,
      }
      
    case LOGIN_FAIL:
      return state;
    case REGISTER_SUCCESS:
      return {
        ...state,
        user: action.payload.data,
      }
    case REGISTER_FAIL:
      return state;
    default:
      return state;
  }
}

profile.js

import React from 'react'
import {  useSelector} from 'react-redux'

export const EditProfile = () => {

   const data = useSelector((state) => state.user);
  return (
    <div>
      {data}
    </div>
  )
}

index.js (rootReducer)

import { combineReducers } from 'redux';
import authReducer from './authReducer';

export default combineReducers({
  auth: authReducer,
})

store.js

import {createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './Reducers';

const initialState = {};
const middleware = [thunk];

const store = createStore(rootReducer,initialState,compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()  
));

export default store;

So Here when i logged in the details were on user object so i need to access then in profile.js so that i can display the details of the user I don't how can i access i need to save the user data which are stored in user (redux store). I don't know what i am missing any help will be grateful

Answer 1

I don't know how you setup your redux.

This is how I usually set them up:-

A. Reducer

• /slices/auth.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  user: [],
  isLoading: false
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  // // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setUser: (state, action) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.user = action.payload
    },
    setLoading: (state, action) => {
      state.loading = action.payload
    }
  }
})

export const { setUser, setLoading } = authSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectUser = (state) => state.auth.user
export const selectLoading = (state) => state.auth.isLoading

export default authSlice.reducer;

B. Store

• store.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from '../slices/auth'

export const store = configureStore({
  reducer: {
    auth: authReducer
  },
  middleware: getDefaultMiddleware({
    serializableCheck: false
  })
})

C. App Component

import { Provider } from 'react-redux'
import { store } from '../app/store'

export default function App() {
  return {
    <>
      <Provider store={store}>
        {/* your content... */}    
      </Provider>
    </>
  }
}

D. Component (where you use the redux)

import { useContext } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectUser } from '../slices/auth'

export default function EditProfile() {
  const dispatch = useDispatch()
  const user = useSelector(selectUser)  

  return {
    <>
      {user}
    </>
  }
}