mapStateToProps не обновляется при обновлении магазина редукса

Question

Я работаю в собственном приложении «Реакция» с интеграцией «Реакция редукса». Когда я вызываю диспетчеризацию из службы, мой магазин обновляется, но каким-то образом мой компонент не выполняет повторную визуализацию.

Неправильно ли вызывать диспетчеризацию из файла службы, а не из функции mapDispatchToProps.

store.js

import { memesReducer } from './memesReducer'

export default combineReducers({
    memesReducer
});

export default configureStore = () => {
    const store = createStore(rootReducer);
    return store;
}

memesReducer.js

const initialState = { memeList: [] }

export const memesReducer = (state = initialState, action) => {
    switch (action.type) {
        case LOAD_MEMES: {
                return { ...state,
                    memeList: action.data
                }
            }

        default:
            return state;
    }
}

memeService.js

import configureStore from '../redux/store';
import { loadMemes } from '../redux/actions';

const store = configureStore();

export const getMemesList = () => {
    axios('https://jsonplaceholder.typicode.com/albums')
        .then(response => {=
            store.dispatch(loadMemes(response.data))
        })
        .catch(error => { console.error('getMemesList : ', error); })
}

memeActions.js

export const loadMemes = memesListData => ({
    type: LOAD_MEMES,
    data: memesListData
});

MemeList. JS

class MemeList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        getMemesList()
    }

    render() {
        const memeListData = this.props.memeList.map((meme) => <MemeCard meme={meme} />)

        return (
            <Container>
                <Content>
                  <List>
                    { memeListData }
                  </List>
                </Content>
            </Container>
        )
    }
}

const mapStateToProps = state => {
    return {
        memeList: state.memesReducer.memeList,
    }
}

export default connect(mapStateToProps)(MemeList);

Answer 1

называйте ваши действия вот так, тогда только я буду работать.

componentDidMount() {
  this.props.getMemesList()
}

, чтобы получить больше разъяснений, ознакомьтесь с этой официальной документацией реагируйте на избыточность

Answer 2

memeActions.js

export const getMemesList = () => dispatch => {
  axios("https://jsonplaceholder.typicode.com/albums")
    .then(response => dispatch(loadMemes(response.data)))
    .catch(error => {
      console.error("getMemesList : ", error);
    });
};
const loadMemes = memesListData => ({
  type: "LOAD_MEMES",
  data: memesListData
});

memeReducer.js

case "LOAD_MEMES": {
   return { ...state, memeList: action.data };
 }

index.js

export default combineReducers({
  memesReducer: memeReducer
});

memeList.js

class memeList extends Component {
  componentDidMount() {
    this.props.getMemesList();
  }
  render() {
    console.log(this.props.memeList);
    return <div>MemeList</div>;
  }
}
const mapStateToProps = state => ({
  memeList: state.memesReducer.memeList
});
export default connect(
  mapStateToProps,
  { getMemesList }
)(memeList);

Answer 3

Да, братан, это не сработает. Вы должны вызвать диспетчеризацию в подключенном компоненте Redux.

Что вы можете сделать, это await или присоединить .then к служебному вызову, и ТО вызывать диспетчеризацию после await или внутри .then.