Реагировать на проблему с крючком. Не перерисовывать один компонент

Question

Я создал глобального провайдера с редуктором, который удерживает пользовательское состояние. При успешном входе пользователя в систему я отправляю и обновляю состояние, устанавливая login = true. Он отлично работает во всех компонентах, кроме верхнего компонента, который не обновляется. Я не вижу никаких проблем. Есть идеи, в чем может быть проблема?

// index.js
import './styles/tailwind.css'; 
import './styles/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {StateProvider } from "./store";
import App from './App';

import * as serviceWorker from './serviceWorker';

const app = (
    <StateProvider>
        <App />
    </StateProvider>
);

ReactDOM.render(app, document.getElementById('root'));





//store.js - the provider that update the state
import React, {createContext, useReducer} from 'react';

const initialState = {
    login:false,
    token:'',
    refreshToken:'',
    user:{}
};

const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ( { children } ) => {
    const [state, dispatch] = useReducer((state, action) => {

        switch(action.type) {
            case 'login user':
                state.login = true;
                state.token = action.token;
                state.refreshToken = action.refreshToken;

                return state;

            default:
                throw new Error();
        };

    }, initialState);

    return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider }


//App.js ---- in this page is not working, the rerendering doesn't happend and login remain false only in this component
import React, {useState, useContext, useEffect} from 'react';
import { store } from "./store";
import logo from './svg/book.svg';
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import Classes from './components/school/Classes.js';
import Students from './components/school/Students.js';
import Home from './components/school/Home.js';
import Cards from './components/Cards.js';
import Login from "./components/Login";


function App() {

    const globalState =  useContext(store);
    const login = globalState.state.login;
    console.log(globalState);
    const message = (login) ? "Welcome user" : "You are not loged in";

  return (
    <div>
        <p>{message}</p>
       <BrowserRouter>
          <header className="grid grid-cols-1 sm:grid-cols-2">    
            <div className="flex align-middle"><img src={logo} className="h-12 p-1"></img>Bucharest Hi School
            </div>
              <div className="flex flex-wrap mr-5">
                <NavLink to="/"   className="w-full sm:w-1/4 text-center sm:text-right p-2" href="#" >Home</NavLink>
                <NavLink to="/classes"   className="w-full sm:w-1/4 text-center sm:text-right p-2" href="#" >Classes </NavLink>
                <NavLink to="/students" className="w-full sm:w-1/4 text-center sm:text-right p-2" href="#">Students</NavLink>
                <NavLink to="/statistics" className="w-full sm:w-1/4 text-center sm:text-right p-2" href="#">Statistics</NavLink>

                      <NavLink to="/logout" className="w-full sm:w-1/4 text-center sm:text-right bg-black text-white p-2" href="#">Logout</NavLink>

                      <NavLink to="/login" className="w-full sm:w-1/4 text-center sm:text-center bg-white rounded text-center p-2" href="#">Login</NavLink>

              </div>               
          </header>


          <div className="flex w-full flex-wrap justify-center my-10">

            <Route exact path="/" component={Home} />
            <Route path="/classes" component={Classes} /> 
            <Route path="/students" component={Students} />
            <Route path="/login" component={Login} />
          </div>
        </BrowserRouter>
    </div>
  );
}

export default App;

Спасибо

Answer 1

Вы изменяете состояние и возвращаете один и тот же объект в функции редуктора, из-за чего ваш компонент предполагает, что данные никогда не изменялись.

Пожалуйста, убедитесь, что вы возвращаете новый объект всякий раз, когда обновляете свое состояние, в вашем случае вы можете использовать return { ...state }; вместо return state; в вашем редукторе.