javascript - 使用 react-router，redux 将无法工作

Question

我读过很多类似的问题，没有一个适合我。

关于

this.props.children 并不总是从其父级继承上下文

在上下文或道具中找不到“商店”

//store config
const createHistoryWithBasename = (historyOptions) => {
    return useBasename(createHistory)({
        basename: '/user_home'
    })
}
const finalCreateStore = compose(
    applyMiddleware(thunk, createLogger()),
    reduxReactRouter({
        createHistory: createHistoryWithBasename }),
        devTools()
    )(createStore);

export function configureStore(initialState) {
    const store = finalCreateStore(rootReducer, initialState);
    return store;
}

索引文件，所有路由都嵌套在 Provider 中。

//entry file
let routes = (
    <Route path="/" component={UserHome}></Route>
);

ReactDom.render(
    <Provider store={store} >
        <ReduxRouter>
            {routes}
        </ReduxRouter>
    </Provider>,
    rootElement
);

组件。我记录了this.props，没有dispatch属性。而上下文的参数是一个空对象。

//user_home.js
class UserHome extends React.Component {
    constructor(props, context){
        //context is empty Object
        super(props, context);
    }
    render() {
        //this.props.dispatch is undefined
        return (
            <div className="container">
               test
            </div>
        );
    }

}

function mapStateToProps(state){
    return state;
}
export default connect(mapStateToProps, {
    pushState
})(UserHome);

也许，这是一个简单的问题，但花了我很多时间。希望能得到你的帮助。谢谢！

Answer 1

也许我们可以注入动作创建者来连接

import * as ActionCreators from './actions/user_actions';

//we can use the actions in ActionCreators to dispatch the action.

export default connect(mapStateToProps, {
    pushState: pushState,
    ...ActionCreators
})(Component);

行动

//action file
export function xxAction(){
    return dispatch =>{
        dispatch({
            type: 'XX_ACTION'
        });
    }
}

该解决方案适合在子组件中调度动作。存在一些限制，期待更好的解决方案。