在“连接(登录)”的上下文中找不到“商店”

时间:2019-09-21 14:20:55

标签: reactjs redux react-redux

我正在尝试为一个已经工作了一段时间的个人项目设置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>将整个内容包装起来并且不使用上下文提供程序,所以这没关系。据我所知,这不应该给我一个错误。

0 个答案:

没有答案