Slice
O slice é representado pelo objeto retornado pela função createSlice. Ele encapsula a lógica relacionada ao estado de uma parte específica da aplicação, neste caso, um contador. O slice define:
- Nome do slice (
name: 'contador') - Estado inicial (
initialState) - Reducers (funções que especificam como o estado deve mudar em resposta a ações)
O código do slice é:
const contador = createSlice({
name: 'contador',
initialState,
reducers: { // Criação de actions
incrementar: (state, { payload, type }) => {
console.log(payload);
console.log(type);
return state + 1; // Retorna um novo estado baseado no estado atual
},
decrementar: (state, { payload, type }) => {
console.log(payload);
console.log(type); // Nome do type é contador (name) e o nome da action (decrementar nesse caso)
return state - 1; // Retorna um novo estado baseado no estado atual
}
}
});
Reducers
Os reducers são as funções dentro do objeto reducers que definem como o estado deve ser modificado em resposta a ações específicas. No seu exemplo, os reducers são as funções incrementar e decrementar.
Cada uma dessas funções recebe o estado atual (state) e a ação despachada (representada pelo objeto { payload, type }). Elas retornam um novo estado baseado no estado atual e na ação recebida.
Exemplo de reducers no seu código:
incrementar: (state, { payload, type }) => {
console.log(payload);
console.log(type);
return state + 1; // Retorna um novo estado baseado no estado atual
},
decrementar: (state, { payload, type }) => {
console.log(payload);
console.log(type); // Nome do type é contador (name) e o nome da action (decrementar nesse caso)
return state - 1; // Retorna um novo estado baseado no estado atual
}
Explicação Adicional
- createSlice: Esta função é usada para criar um slice. Ela automaticamente cria action creators e action types baseados nos reducers que você define.
- name: O nome do slice, que será usado como prefixo nos tipos de ação gerados.
- initialState: O estado inicial para este slice do estado.
- reducers: Um objeto onde cada chave é o nome de uma ação e cada valor é uma função reducer que define como o estado deve mudar em resposta a essa ação.
Utilização dos Reducers e Actions
Quando você cria um slice com createSlice, ele retorna um objeto que inclui os action creators e o reducer gerado. Você pode exportá-los para uso em outras partes da sua aplicação.
Exemplo de como usar o slice:
// Exporta as ações
export const { incrementar, decrementar } = contador.actions;
// Exporta o reducer para ser usado na configuração do store
export default contador.reducer;
Com isso, incrementar e decrementar são action creators que você pode usar para despachar ações, e contador.reducer é o reducer que você incluiria na configuração do seu Redux store.
