无法解析容器中的存储（React，Redux）

Posted 2021-04-16

在开始时，我想在JS和React中签名我是业余爱好者。我遇到一个问题，我使用React-Router显示的容器没有收到商店。我不知道问题是什么。我用Provider包装了root组件，我的应用程序一直显示这样的错误：

这是我的Application component的片段：

const rootReducer = combineReducers({
    adress: require('./StudiosListRedux').reducer
})

const store = createStore(rootReducer)

const App = ({store}) => (
  <Provider store={store} >
    <BrowserRouter history={history}>
      <Switch>
        <Route exact path='/' component={WelcomeScreen} />
        <Route path='/main' component={StudiosList} />
      </Switch>
    </BrowserRouter>
  </Provider>
)

这是我的WelcomeScreen container：

export class WelcomeScreen extends Component {
    state = {
        city: '',
        street: '',
        number: '',
        withDrive: false
    }

    handleCityChange = (text) => {
        console.log('city', text)
        this.setState({
            city: text
        })
    }

    handleStreetChange = (text) => {
        console.log('street', text)
        this.setState({
            street: text
        })
    }

    handleNumberChange = (text) => {
        console.log('number', text)
        this.setState({
            number: text
        })
    }

    handleCheckBoxClick = () => {
        console.log('checkbox', 'pushed')
        this.setState({
            withDrive: !this.state.withDrive
        })
    }

    handleSearchClick = () => {
        const { city, street, number, withDrive } = this.state
        this.props.fetchStudios('query')
    }

    render () {
        const { city, street, number, withDrive } = this.state
        return (
            <Container>
                <SearchComponent
                    withDrive={withDrive}
                    streetValue={street}
                    cityValue={city}
                    numberValue={number}
                    onStreetChange={this.handleStreetChange}
                    onCityChange={this.handleCityChange}
                    onNumberChange={this.handleNumberChange}
                    onCheckBoxClick={this.handleCheckBoxClick}
                    onSubmitClick={this.handleSearchClick}
                />
            </Container>
        )
    }
}

export const mapStateToProps = state => {
    destination: state.adders.toJS()
}

const mapDispatchToProps = {
    fetchStudios: StudiosActions.studiosRequest
}

export default connect(mapStateToProps, mapDispatchToProps)(WelcomeScreen)

任何人都可以帮我解决我的问题吗？我该怎么做才能为我的容器提供商店？

答案

ReactDOM.render(<App store={store} />, document.getElementById("root"))

看来，你忘了将商店传递到应用程序了。我可能错了，除此之外还有其他原因，

另一答案

如果App是你的根组件它没有props，在这里你试图访问undefined store道具并且你正在覆盖你之前做的const声明。

只需删除{ store } prop声明：

const store = createStore(rootReducer)

const App = () => (
  <Provider store={store} >
    <BrowserRouter history={history}>
      <Switch>
        <Route exact path='/' component={WelcomeScreen} />
        <Route path='/main' component={StudiosList} />
      </Switch>
    </BrowserRouter>
  </Provider>
)