Question

我想问一下如何在React.js中将redux与路由器配合使用。

我尝试在链接https://github.com/yunllvm/politequestion/tree/master/13/router-tutorial的这段代码中对路由器使用redux

我的意图是

1）/ src / modules是redux的目录，redux将布尔标志存储为符号

2）在src / modules / index.js中使用CombineReducer

3）当用户访问路径“ /”时，呈现Home组件（App.js）

4）渲染Home组件时，如果redux（src / modules / auth.js）的符号值是true，请将其设置为false，或者如果redux的符号值是false，则将其设置为true。并呈现redux的符号值。

但是我遇到以下错误。

TypeError: Object(...) is not a function

Provider
node_modules/react-redux/es/components/Provider.js:10
   7 | var store = _ref.store,
   8 |     context = _ref.context,
   9 |     children = _ref.children;
> 10 | var contextValue = useMemo(function () {
     | ^  11 |   var subscription = new Subscription(store);
  12 |   subscription.onStateChange = subscription.notifyNestedSubs;
  13 |   return {

下面是每个代码。

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './modules';

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

// src/modules/auth.js
import {createAction, handleActions} from 'redux-actions';


const TRUE_ACTION = 'auth/TRUE';
const FALSE_ACTION = 'auth/FALSE'; 

export const tact = createAction(TRUE_ACTION);
export const fact = createAction(FALSE_ACTION);

const initialState = {
    sign:false
};

const auth = handleActions(
    {
        [TRUE_ACTION]:()=>{
            return true;
        },
        [FALSE_ACTION]:()=>{
            return false;
        }
    },
    initialState
);

export default auth;

// src/modules/index.js

import {combineReducers} from 'redux';
import auth from './auth';

const rootReducer = combineReducers({
    auth,
});

export default rootReducer;

// src/App.js

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';
import HistorySample from './HistorySample';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">intro</Link>
        </li>
        <li>
          <Link to="/profiles">profile</Link>
        </li>
        <li>
          <Link to="/history">History example</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route path={['/about', '/info']} component={About} />
        <Route path="/profiles" component={Profiles} />
        <Route path="/history" component={HistorySample} />
        <Route

          render={({ location }) => (
            <div>
              <h2>not existed.</h2>
              <p>{location.pathname}</p>
            </div>
          )}
        />
      </Switch>
    </div>
  );
};

export default App;

// src/Home.js

import React from 'react';
import {connect } from 'react-redux';
import {tact, fact} from './modules/auth';

const Home = ({sign, tact, fact}) => {

  if(sign===true){
    fact();
  }else{
    tact();
  }

  return (
    <div>
      <h1>Home</h1>
      <div>{sign}</div>
    </div>
  );
};

export default connect(
  state => ({
    sign:state.sign
  }),
  {
    tact,
    fact
  }

)(Home);

我想知道为什么会发生此TypeError以及如何解决此问题。我猜这是因为我同时使用了Redux和路由器，但我找不到合适的解决方案。

你能告诉我我应该做些什么吗？

感谢阅读！

如何在React.js中将Redux与路由器一起使用

0 个答案: