如何在 Redux 中设置初始状态？

在 ReactJS 中，redux 是全局管理整个应用程序状态的工具。我们在 redux 中用作 store 的 state 只能在 action 的帮助下进行修改。但是，必须先在某处指定此状态才能使用它。

我们更喜欢在 reducer 文件中声明我们的初始状态。然后我们在 store 中使用该 reducer，并在整个应用程序中提供该 store 使用。

让我们创建一个与 redux 反应的应用程序并在那里设置初始状态：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：模块安装，现在从终端中项目的根目录，运行以下命令

npm install redux

npm install react-redux

第四步：在 src 文件夹中，新建两个文件夹组件和 redux。在组件中添加两个名为 content.jsx 和 header.jsx 的 jsx 文件。在 redux 文件夹中，创建一个文件夹名称为 actions 并将 actions.js 文件添加到其中。然后在redux文件夹中创建一个文件夹名称reducer并添加两个文件reducer.js和rootreducer.js。然后在 redux 文件夹中添加 store.js 文件。

项目结构：它看起来像这样。

项目结构

示例：让我们在 redux 的帮助下制作一个简单的应用程序。在相应的文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

应用程序.js

import React from "react";
import { Provider } from "react-redux";
import Content from "./components/content";
import Header from "./components/header";
import store from "./redux/store";
  
function App() {
  return (
    
      

        

        
      
    
  );
}
  
export default App;

组件/内容.jsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
  
import { login, logout, increment, decrement } 
    from '../redux/actions/actions';
  
export default function Main() {
  const count = useSelector(state => state.count.counter);
  const signed = useSelector(state => state.auth.signed);
  const dispatch = useDispatch();
  
  return (
    

      
Total count: {count}
  
      

         dispatch(decrement(2))}>-2
         dispatch(increment(2))}>+2
      
  
      {signed ? (
         dispatch(logout())}>LOGOUT
      ) : (
         dispatch(login())}>LOGIN
      )}
    
  );
}

组件/header.js

import React from "react";
import { useSelector } from "react-redux";
  
export default function Header() {
  const signed = useSelector(state => state.auth.signed);
  
  return (
    

      
Logged in: {String(signed)}
    
  );
}

redux/actions/actions.js

export function login() {
    return {
      type: "@auth/LOGIN"
    };
  }
    
  export function logout() {
    return {
      type: "@auth/LOGOUT"
    };
  }
  
  export function increment(number) {
    return {
      type: "@auth/INCREMENT",
      payload: number
    };
  }
    
  export function decrement(number) {
    return {
      type: "@auth/DECREMENT",
      payload: number
    };
  }

redux/reducer/reducer.js

import produce from "immer";
  
const INITIAL_STATE = {
  signed: false,
  counter: 0
};
  
export default function auth(state = INITIAL_STATE, action) {
  return produce(state, draft => {
    switch (action.type) {
      case "@auth/LOGIN":
        draft.signed = true;
        break;
      case "@auth/LOGOUT":
        draft.signed = false;
        break;
        case "@auth/INCREMENT":
        draft.counter += action.payload;
        break;
      case "@auth/DECREMENT":
        draft.counter -= action.payload;
        break;
      default:
    }
  });
}

在这里，我们已经声明了我们的初始状态并使用一些默认值对其进行了初始化。

redux/reducer/rootreducer.js

import { combineReducers } from "redux";
  
import auth from "./reducer";
import count from "./reducer";
  
export default combineReducers({
  auth,
  count
});

redux/store.js

import { createStore } from "redux";
import rootReducer from "./reducers/rootreducer";
  
const store = createStore(rootReducer);
  
export default store;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：

这个例子中有两个初始状态，它们是在 redux 的 reducer 文件中定义的。

• 签名：假，
• 计数器：0

正在改变的行动。

输出