Javascript redux存储更新时MapStateTops未更新

我在一个带有react-redux集成的react原生应用程序中工作。当我从服务调用dispatch时，我的存储正在更新，但不知何故，我的组件没有重新呈现

从服务文件而不是从mapDispatchToProps函数调用dispatch是否错误

store.js

从“/memesReducer”导入{memesReducer}
导出默认合并器({
记忆减数器
});
导出默认配置存储=（）=>{
const store=createStore（rootReducer）；
退货店；
}

memesReducer.js

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

const initialState={memeList:[]}
导出常量memesReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
壳体载荷系数：{
返回{…状态，
memeList:action.data
}
}
违约：
返回状态；
}
}

memeService.js

从“../redux/store”导入configureStore；
从“../redux/actions”导入{loadMemes}；
const store=configureStore（）；
导出常量getMemesList=（）=>{
axios（'https://jsonplaceholder.typicode.com/albums')
。然后（响应=>{=
存储.发送（加载内存（响应.数据））
})
.catch（错误=>{console.error（'getMemesList:'，error）；}）
}

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
});

export const loadMemes=memesListData=>({
类型：LOAD_MEMES，
数据：memesListData
});

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);

class MemeList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
getMemesList（）
}
render（）{
const memeListData=this.props.memeList.map（（meme）=>）
返回(
{memeListData}
)
}
}
常量mapStateToProps=状态=>{
返回{
memeList:state.memesReducer.memeList，
}
}
导出默认连接（MapStateTops）（MemeList）；

是的，兄弟，这行不通。您应该在Redux连接的组件中调用dispatch

---

你可以做的是等待或附加一个

。然后

到服务呼叫，然后在

等待

后或在

内呼叫调度。然后

像这样呼叫你的操作，只有我会工作

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

有关更多说明，请查看此官方文档

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);

class memeList扩展组件{
componentDidMount（）{
this.props.getMemesList（）；
}
render（）{
console.log（this.props.memeList）；
返回模因列表；
}
}
常量mapStateToProps=状态=>({
memeList:state.memesReducer.memeList
});
导出默认连接(
MapStateTops，
{getMemesList}
)（memeList）；

撇开练习不谈，仔细查看

映射stateTrops

-为什么要映射

state.memesReducer.memeList

？我认为应该是

state.memeList

。即使dispatch从redux连接的组件外部调用，它也会工作。您认为它应该何时重新呈现？@Rohit Bhirud检查此如何从componentDidMount@Rohit Bhirud调用检查该解决方案并让我知道。如果你仍然面临问题@bhojendraurauniyar-好的，酷。看来你是在指使我。使用

@

进行定向本来可以避免这种情况。

调度

操作即使从非redux连接的组件调用，也可以工作，因为它应该在scope中存储和调度。给我一个错误“操作必须是普通对象。使用自定义中间件进行异步操作。”。我是否必须使用某种异步中间件，如redux thunk或saga？使用redux thunk非常有效。谢谢如果我能让它与服务功能一起工作，我将进一步尝试。