我正在尝试为一个已经工作了一段时间的个人项目设置redux,但是我似乎无法弄清楚为什么会出现此错误:
Could not find "store" in the context of "Connect(Login)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Login) in connect options.
我确保我的商店设有供应商,我尝试更改商店的创建方式,并且绕过路由略微没有成功。这是我的代码
Index.js
ReactDOM.render(
<Provider store={store} >
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
App.js
function App() {
return (
<div>
<Nav/>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
</div>
);
}
Login.js
export default connect(
state => {
return {auth: state.auth}
},
(dispatch => bindActionCreators(actionCreators, dispatch)
))(Login);
configStore.js
export default function configureStore(history, initialState) {
const reducers = {
auth: Auth.reducer
};
const middleware = [
thunk,
routerMiddleware(history)
];
// In development, use the browser's Redux dev tools extension if installed
const enhancers = [];
const isDevelopment = process.env.NODE_ENV === 'development';
if (isDevelopment && typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());
}
const rootReducer = combineReducers({
...reducers,
routing: routerReducer
});
return createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middleware), ...enhancers)
);
}
Auth.js
const setAuth = 'SET_AUTH';
const removeAuth = 'REMOVE_AUTH';
const initialState = {
isAuthenticated: false
};
export const actionCreators = {
setAuthInfo: (authInfo) => ({type: setAuth, ...authInfo}),
removeAuthInfo: () => ({type: removeAuth})
};
export const reducer = (state, action) => {
state = state || initialState;
if (action.type === setAuth) {
return {
...state,
isAuthenticated: action.isAuthenticated
}
}
if (action.type === removeAuth) {
return {
...initialState
}
}
return state;
};
package.json
{
"name": "myApp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fullhuman/postcss-purgecss": "^1.2.0",
"autoprefixer": "^9.6.1",
"firebase": "^6.2.4",
"history": "latest",
"npm-watch": "^0.6.0",
"postcss": "^7.0.17",
"postcss-cli": "^6.1.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-icons": "^3.7.0",
"react-image": "^2.2.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-router-redux": "^4.0.8",
"react-scripts": "3.1.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"tailwind": "^4.0.0",
"watch": "^1.0.2"
},
"scripts": {
"tailwindcss": "postcss src/assets/css/tailwind.src.css -o src/assets/css/tailwind.css",
"watch-tailwindcss": "npm run tailwindcss --watch",
"start": "npm run tailwindcss && react-scripts start",
"build": "npm run tailwindcss && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"redux-devtools": "^3.5.0",
"tailwindcss": "^1.1.2"
},
"watch": {
"build:copy": {
"patterns": [
"src"
],
"extensions": "js,jsx,html,css"
}
}
}
我不明白为什么我已经被告知要使用<Provider>
将整个内容包装起来并且不使用上下文提供程序,所以这没关系。据我所知,这不应该给我一个错误。