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

Question

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

关于

this.props.children doesn't always inherit the context from its parent

Could not find "store" in either the context or props

//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 属性。而context的参数是一个空对象。

//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

也许我们可以将 Action 创建器注入(inject)连接

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

该方案适用于子组件中的 Action 调度，存在一定的局限性，期待更好的方案。