Блог

Я изучаю Redux Redux Toolkit. И мне нужен совет.

Очень простой пример. У меня есть некоторый фрагмент состояния:

 const postsSlice =  createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    // ... some other reducers

    updatePost(state, payload) {
      const { id, title, content } = payload;
      const existingPost = state.find(post => post.id === id);

      if (existingPost) {
        existingPost.title = title;
        existingPost.content = content;
      } else {
        // I want to dispatch some error action because user tries to edit a post that does not exist!
      }
    }
  }
});
  

Итак, у меня есть updatePost редуктор, который я экспортирую как создатель действия. Он обновляет сообщение с заданным идентификатором. Если сообщение с идентификатором не найдено, я хочу показать сообщение об ошибке. Допустим, у меня есть другой фрагмент состояния для сообщений с соответствующим действием. Но как я могу отправить его из своего редуктора? И я должен? Для меня это похоже на анти-шаблон.

Пока я думаю экспортировать оболочку (thunk?) для моего updatePost создателя действий. Что-то вроде этого:

 export const updatePost = payload => (dispatch, getState) => {
  const { id } = payload;
  const existingPost = getState().posts.find(post => post.id === id);
  
  if (existingPost) {
    dispatch(postsSlice.actions.updatePost(payload));
  } else {
    dispatch(showError('some invalid post error'));
  }
};
  

Это решение выглядит очень некрасиво для меня. Прежде всего, он работает со всем состоянием хранилища ( getState() ). А также, я не уверен, что это то, для чего я должен использовать thunks. Похоже, что они предназначены больше для таких вещей, как первичная асинхронная выборка данных.

Но как я могу отправить его из своего редуктора? И я должен? Для меня это похоже на анти-шаблон.

Здесь вы правы. Вы никогда не должны отправлять действие из редуктора.

Ваш пример с thunk неплох. Но поскольку вы спрашиваете мнения, мое личное мнение заключается в том, что компонент, который обрабатывает редактирование сообщения, должен отвечать за то, чтобы убедиться, что сообщение существует (что вы бы сделали с помощью селектора). Если идентификатор записи недопустим, мы должны предотвратить редактирование. Не было бы необходимости отправлять недопустимую ошибку post в качестве действия, это было бы то, что обрабатывается внутри компонента.

 const PostEditor = ({id}) => {

    const current = useSelector(getPost(id));

    const dispatch = useDispatch();

    return (
        <div>
            {!! current ? 
                <EditPost ..../>
                :
                <div>Error: Invalid Post ID #{id}</div>
            }
        </div>
    )
}