Redux状态不会传播到组件

问题描述：

我一直在尝试使用Reacts组件功能来创建组件。在这种情况下，我对componentDidMount特别感兴趣。Redux状态不会传播到组件

但是，无论我尝试什么，我的状态都不会传播到组件。

以下是部分：

class MainPage extends React.Component 
{ 
    componentDidMount() { 
     this.props.actions.requestPosts(); 
    } 
    render() { 
     return(
      <div className="main-page"> 
       <PreviewList posts={this.props.posts}/> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = state => ({ 
    posts: state.main_posts, 
    errors: state.main_errors 
}); 

const mapDispatchToProps = dispatch => { 
    return { 
     actions: { 
      requestPosts:() => dispatch(requestPosts()) 
     } 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

减速机：

export default (state = {main_posts: [], main_errors: []}, action) => { 
    switch(action.type) { 
     case USER_REQUESTS_POSTS_SUCCEEDED: 
      return Object.assign({}, state, { 
       main_posts: action.posts 
      }); 
     case USER_REQUESTS_POSTS_FAILED: 
      return Object.assign({}, state, { 
       main_errors: action.errors 
      }); 
     default: 
      return state; 
    } 
};

为了简单起见，我没有包含import语句。我使用了redux-thunk。我测试了这些动作，他们成功地到达了减速器。新状态已成功创建并返回。但它根本不会到达所需的组件。

我已经尝试过研究，并且我只找到了突变状态的减法器的示例，但是我看不到任何突变状态的地方。我究竟做错了什么？（讽刺的是，代码与我的其他反应应用程序很相似）。

如果它是有帮助的，这是我的店：

export const history = createHistory(); 

const middleware = [ 
    thunk, 
    routerMiddleware(history) 
]; 

const reducers = { 
    main: mainReducer, 
    router: routerReducer 
}; 

const store = createStore(
    combineReducers(reducers), 
    {}, 
    applyMiddleware(...middleware) 
); 

export default store;

编辑：按照要求，这里是我的操作：

export const USER_REQUESTS_POSTS_SUCCEEDED = 'user/REQUESTS/POSTS/SUCCESS'; 
export const USER_REQUESTS_POSTS_FAILED = 'user/REQUESTS/POSTS/FAILURE'; 

export const requestPosts =() => { 
    return function(dispatch) { 
     return fetchPosts().then(
      posts => dispatch(requestPostsSucceeded(posts)), 
      errors => dispatch(requestPostsFailed(errors)) 
     ); 
    }; 
}; 

function fetchPosts() { 
    return Promise.resolve([{title: 'Test Post', content_short: 'Hello World', author: 'Extremo', category: 'development', tags: ['test'], date: '15.11.17'}]); 
} 

export const requestPostsSucceeded = (posts) => { 
    return {type: USER_REQUESTS_POSTS_SUCCEEDED, posts: posts}; 
}; 

export const requestPostsFailed = (errors) => { 
    return {type: USER_REQUESTS_POSTS_FAILED, errors: errors}; 
};

你能告诉我们'requestPosts'吗？ – nem035

@ nem035我更新了我的问题。但请记住，减速器确实收到帖子，并且会在帖子中产生新的状态。 – Extremo

然后你是否使用['']（https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store）？ – nem035

答

从商店定义

const reducers = { 
    main: mainReducer, 
    router: routerReducer 
};

你应该使用访问组件的状态您component reducer's key

这是main。

const mapStateToProps = state => ({ 
    posts: state.main.main_posts, 
    errors: state.main.main_errors 
});

这是我故意不使用以前的帖子。我会立即编辑我的问题，以显示请求邮件正在做什么！等一下。 – Extremo

在那里，我更新了我的答案并添加了操作。行动正在被调用，reducer接收行动信息并产生新的状态..它只是没有到达组件。 – Extremo

@Extremo谢谢info.Please检查更新回答 –

答

你mapStateToProps功能应该是：

function mapStateToProps(state) { 
    return { 
    posts: state.main.main_posts, 
    errors: state.main.main_errors 
    } 
}

您正在传递邮件和错误undefined当前

感谢您的提示，检查是不必要的，但它仍然不能解决状态/道具没有更新的问题，它不会被重新渲染 – Extremo

哦，我刚刚意识到你提到它从来没有得到调度，当它实际上。有趣的，但它不应该有！因为我测试了它，并且始终调用该操作并生成帖子。嗯 – Extremo

啊我现在看到这个问题，你只需要修复你的'mapStateToProps'钩子，我已经更新了答案 –

Redux状态不会传播到组件

相关推荐