¿Cómo establecer el estado inicial en Redux?

En ReactJS, redux es la herramienta para la gestión del estado a lo largo de toda la aplicación a nivel mundial. El estado que usamos dentro de redux como tienda solo se puede modificar con la ayuda de las acciones. Pero, este estado debe especificarse en algún lugar primero para usarlo. 

Preferimos declarar nuestro estado inicial en los archivos reductores. Luego usamos ese reductor en la tienda y proporcionamos ese uso de la tienda dentro de toda la aplicación.

Vamos a crear una aplicación en reaccionar con redux y establecer el estado inicial allí:

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2 : después de crear la carpeta de su proyecto, es decir, un ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3 : Instalación del módulo, ahora desde el directorio raíz de su proyecto en la terminal, ejecute el siguiente comando

npm install redux

npm install react-redux

Paso 4: en la carpeta src, cree dos nuevos componentes de carpeta y redux. En componentes agregue dos archivos jsx llamados content.jsx y header.jsx. En la carpeta redux, cree una carpeta con el nombre de acciones y agréguele el archivo actions.js. Luego, en la carpeta redux, cree un reductor de nombre de carpeta y agregue dos archivos llamados reducer.js y rootreducer.js. Y luego, en la carpeta redux, agregue el archivo store.js.

Estructura del proyecto: Se verá así.

estructura del proyecto

Ejemplo: hagamos una aplicación simple con la ayuda de redux. Anote los siguientes códigos en los archivos respectivos.

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

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 (
    <Provider store={store}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          height: "100vh",
        }}
      >
        <Header />
        <Content />
      </div>
    </Provider>
  );
}
  
export default App;

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 (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
  
    }}>
      <h1>Total count: {count}</h1>
  
      <div>
        <button onClick={() => dispatch(decrement(2))}>-2</button>
        <button onClick={() => dispatch(increment(2))}>+2</button>
      </div>
  
      {signed ? (
        <button onClick={() => dispatch(logout())}>LOGOUT</button>
      ) : (
        <button onClick={() => dispatch(login())}>LOGIN</button>
      )}
    </div>
  );
}

import React from "react";
import { useSelector } from "react-redux";
  
export default function Header() {
  const signed = useSelector(state => state.auth.signed);
  
  return (
    <div signed={signed}>
      <h1>Logged in: {String(signed)}</h1>
    </div>
  );
}

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
    };
  }

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:
    }
  });
}

Aquí, hemos declarado nuestro estado inicial y lo hemos inicializado con algunos valores predeterminados.

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

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

Paso para ejecutar la aplicación: Use el siguiente comando para ejecutar la aplicación:

npm start

Producción:

Hay dos estados iniciales en este ejemplo que se definen en el archivo reducer de redux.

• firmado: falso,
• contador: 0

que están cambiando por acciones.

Producción