Блог

У меня есть настройка селектора в моем файле reducer, и в моем файле react я хочу использовать useReducer и createSelector для вызова этого селектора только при изменении части состояния (state.data).

// Селектор в reducer.js

 const getScore = (state = initialState) => 
  Object.values(state.data).reduce(
    (score, { status }) =>
      status === "accepted" ? score   1 : 
      status === "rejected" ? score   10 : 
      score, 0
  );
  

// Вызов из reactComponent.js

 const score = useSelector(({ rejectionState }) => getScore(rejectionState));
  

Каким должен быть синтаксис для createSelector и изменения синтаксиса для useSelector ?

Я не уверен, что здесь происходит rejectionState , но я предполагаю, что data находится в state.rejectionState.data , а не state.data .

Вам нужна одна функция, которая выбирает объект data из хранилища, и одна функция, которая сопоставляет data его с оценкой. Затем вы используете createSelector для объединения двух. Вы можете определить эти функции отдельно как переменные или записать их непосредственно внутри createSelector .

 const {createSelector} = Reselect;

const dataSelector = (state) => state.rejectionState.data;

const getScore = (data = {}) =>
  Object.values(data).reduce(
    (score, { status }) =>
      status === "accepted"
        ? score   1
        : status === "rejected"
        ? score   10
        : score,
    0
  );

const scoreSelector = createSelector(dataSelector, getScore);

let exampleState = {
  rejectionState: {
    data: {
      someKey: {
        status: "accepted"
      },
      otherKey: {
        status: "rejected"
      }
    }
  }
};

console.log( "exampleState score is:" )
console.log( scoreSelector(exampleState) );  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.js"></script>