Блог

Я читаю официальный учебник Redux. Я удивился, когда увидел counterReducer , что то, чего нет ни в одном модуле, имеет ценность и работает! Я не смог найти его описания, но :

Поскольку мы знаем, что функция контрредуктора поступает из features/counter/counterSlice.js давайте посмотрим, что находится в этом файле, кусочек за кусочком.

Я даже меняю имя среза на counter3, но он все еще работает!

Может кто-нибудь описать мне, пожалуйста, как он генерируется?

counterSlice.js

 import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
  name: 'counter3',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value  = 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export const incrementAsync = amount => dispatch => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 1000);
};

export const selectCount = state => state.counter.value;

export default counterSlice.reducer;
  

store.js (Мы используем его в store.js модуль)

 import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';  //HERE IS THE IMPORTING PLACE

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});
  

https://redux.js.org/tutorials/essentials/part-2-app-structure#creating-slice-reducers-and-actions

Используется counterSlice.js ES6 «экспорт по умолчанию» для экспорта функции редуктора, сгенерированной createSlice :

 export default counterSlice.reducer;
  

Затем любой другой файл может использовать «импорт по умолчанию», чтобы получить ссылку на эту функцию редуктора. Однако, когда мы по умолчанию импортируем значение, мы можем присвоить ему любое имя, которое захотим:

 // fileA.js
import counterReducer from "./features/counter/counterSlice"

// fileB.js
import someReducer from "./features/counter/counterSlice"

// fileC.js
import fred from "./features/counter/counterSlice"
  

Все три из этих переменных будут указывать на одну и ту же функцию reducer — вопрос только в том, какое имя локальной переменной мы создали.

Итак, в этом случае counterReducer переменная in store.js является ссылкой на функцию reducer, которая была экспортирована из counterSlice.js файла.