Entendimento, e em Redux Store Actions Reducers React

Em um aplicativo baseado em Redux, a arquitetura gira em torno de três conceitos principais: Redux store, actions e reducers. Vamos nos aprofundar em cada um desses conceitos e ver como eles funcionam juntos.

Redux Store

O Redux store é uma fonte única de verdade que contém o estado completo da sua aplicação. É essencialmente um objeto JavaScript que contém os dados que representam todo o estado do aplicativo. Você cria store usando a createStore função da biblioteca Redux.

Actions

Actions são objetos JavaScript simples que descrevem algo que aconteceu no aplicativo. Eles carregam um type campo que indica o tipo de ação que está sendo executada e também podem ser incluídos dados adicionais. Actions são criados usando criadores de ação, que são funções que retornam objetos de ação. Por exemplo:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers especifique como o estado do aplicativo muda em resposta a actions. Um redutor é uma função pura que recebe o estado atual e uma ação como argumentos e retorna um novo estado. Reducers são combinados em um único redutor de raiz usando a combineReducers função. Aqui está um exemplo simples:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

Trabalhando juntos

Quando você despacha uma ação usando a dispatch função, o Redux encaminha a ação para todos os arquivos reducers. Cada redutor verifica se o tipo da ação corresponde ao seu e atualiza a parte relevante do estado de acordo. O estado atualizado é então armazenado no Redux store e todos os componentes conectados são renderizados novamente com base no novo estado.

Cenário de exemplo

Imagine um aplicativo de lista de tarefas. Quando um usuário adiciona uma nova tarefa, uma ação é despachada com o tipo ADD_TODO e o texto da tarefa como carga útil. O redutor todos recebe esta ação, adiciona o novo todo ao estado e retorna o estado atualizado.

Conclusão

Compreender como Redux store, actions e reducers interagem é crucial para um gerenciamento de estado eficaz. Essa arquitetura garante uma separação clara de interesses e facilita o gerenciamento de estados complexos de aplicativos. À medida que você continua a desenvolver o Redux, esses conceitos formarão a base de sua estratégia de gerenciamento de estado.