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

Posted 2023-02-22

【中文标题】使用 react-router，redux 将无法工作

【英文标题】：With react-router, redux will not work

【发布时间】：2016-03-18 20:37:46

【问题描述】：

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

关于

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

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

【参考方案1】：

也许我们可以将动作创建者注入到connect

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

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

【讨论】：

你好在哪里。基本上，对于您的方法，您需要使用 redux-thunk 将调度传递给动作创建者，这对于简单的情况来说似乎有点矫枉过正。你有 mapDispatchToProps 函数作为第二个 connect 参数，它旨在将动作创建者绑定到 dispatch 并将它们进一步传递给连接组件的道具。谈到context，除非您在子组件上指定contextTypes 字段，否则您的组件将无法访问它。