React Redux почему не обновляется компонента после асинхронного обновления стор?

Question

[Богдан]

Делаю из редюсера сет в стейт с локального json

let initialState = {};

fetch('./data.json')
  .then((response) => response.json())
  .then((json) => Object.assign(initialState, json));

export default function data(state = initialState) {
  return state;
}

В компоненте достаю стейт, но компонента не обновляться по тем данным которые в стейте

import React from 'react';
import { useSelector } from 'react-redux';

export default (prop) => {
  const count = useSelector((state) => state);
  console.log(count);
  console.log(count.data);
  console.log(count.data.button);
  return (
    <button type="button" className={`button${(prop.bg ? ' button_bg' : '')}`}>
      {count.data.button ? count.data.button : '000000000'}
    </button>
  );
};

Вот так в консоли выглядят console.log с кода выше



Как заставить компоненту брать значения из стор или что я делаю не так ?

Comments

[nakree]

А почему redux должен узнать что вы что то там смутрировали у себя в коде? Для обновления данных в сторе используются dispatch и экшены. Об этом сказано на первой странице в доке https://redux.js.org/introduction/getting-started#...

[Богдан]

Спасибо

Answer 1

[Loli E1ON]

Вам здесь нужно использовать redux-thunk. Либо в компоненте сделать запрос и задиспатчить екшен с пришедшими данными.
Менять состояние можно только чистыми функциями, и так же нужно придерживаться иммутабельности данных.

Comments

[Богдан]

Можете описать в двух словах ка юзать redux-thunk для такой задачи?

[Loli E1ON]

Богдан, просто создаёте асинхронный екшен редакт санки, в нем выполняете запрос к серверу, получаете данные, затем диспатчите екшен, который эти данные обновит в вашем стейте.

[Богдан]

Loli E1ON, Спасибо!

Answer 2

[Богдан]

Как сказано выше нужно юзать redux-thunk. Вот хорошая статья на эту тему тык