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

來源

2017-11-18 Extremo

你能告訴我們'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 
});

來源

2017-11-18 04:58:31

這是我故意不使用以前的帖子。我會立即編輯我的問題，以顯示請求郵件正在做什麼！等一下。 – Extremo

在那裏，我更新了我的答案並添加了操作。行動正在被調用，reducer接收行動信息併產生新的狀態..它只是沒有到達組件。 – Extremo

@Extremo謝謝info.Please檢查更新回答 –

你mapStateToProps功能應該是：

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

您正在傳遞郵件和錯誤undefined當前

來源

2017-11-18 04:00:41

感謝您的提示，檢查是不必要的，但它仍然不能解決狀態/道具沒有更新的問題，它不會被重新渲染 – Extremo

哦，我剛剛意識到你提到它從來沒有得到調度，當它實際上。有趣的，但它不應該有！因爲我測試了它，並且始終調用該操作並生成帖子。嗯 – Extremo

啊我現在看到這個問題，你只需要修復你的'mapStateToProps'鉤子，我已經更新了答案 –

Redux狀態不會傳播到組件

回答

相關問題