前两天自己琢磨着用Redux，管理登陆状态

大概项目结构如下

|--src
 |--index.js
 |--mods
  |--authSlice.js
  

为什么不用TS?刚开始写React不久，先等我用熟练了再换吧，不然学习过程很痛苦！但是Nest.js肯定是要用的

接下来是一个示例，目前我还只用Redux来管理全局数据或者多页面需要访问的数据

1. 创建 Redux Slice

我们将使用 Redux Toolkit 的 createSlice 来创建一个 slice，用于管理 token 状态。

javascript
// src/store/authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  token: null,
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    clearToken: (state) => {
      state.token = null;
    },
  },
});

export const { setToken, clearToken } = authSlice.actions;
export default authSlice.reducer;

2. 创建 Redux Store

接下来，创建 Redux store，并将 authSlice 添加到 store 中。

javascript
// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export default store;

3. 在 React 应用中使用 Redux

在 index.js 中，使用 Provider 将 Redux store 注入到 React 应用中。

javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 创建 React 组件

创建一个简单的 React 组件来展示和更新 token 状态。

javascript
// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setToken, clearToken } from './store/authSlice';

function App() {
  const token = useSelector((state) => state.auth.token);
  const dispatch = useDispatch();

  const handleLogin = () => {
    // 模拟登录，获取 token
    const newToken = 'example-token';
    dispatch(setToken(newToken));
  };

  const handleLogout = () => {
    dispatch(clearToken());
  };

  return (
    <div>
      <h1>Login Status</h1>
      {token ? (
        <div>
          <p>Logged in with token: {token}</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Not logged in</p>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
}

export default App;