反应本地人:没有找到商店。一定要遵照这些指示

Question

我不明白:我有一个商店，我已经安装了redux扩展，以跟随我的树存储。

但是devtool在我的react本地应用程序中找不到我的商店。

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import authReducer from './store/reducers/auth';

const rootReducer = combineReducers({
  auth: authReducer,
})

const store = createStore(rootReducer, {}, composeWithDevTools(
  applyMiddleware(ReduxThunk),
));

在这里，我的包版本：

"react-native-debugger-open": "^0.3.25",
"redux-devtools-extension": "^2.13.9",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

我不明白问题在哪里。

你能帮帮我吗?

Answer 1

你忘了出口你的商店了。尝试以下步骤

步骤1:创建存储

import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import profile from '../reducers/profile';

const rootReducer = combineReducers({
  user: profile
});

const configureStore = () => {
  return createStore(
    rootReducer,
    compose(applyMiddleware(thunk))
  );
};

export default configureStore;

步骤2:在index.js中连接您的商店

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store';
import App from './App';
import * as serviceWorker from './serviceWorker';

const store = configureStore();

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

serviceWorker.unregister();

步骤3:在组件中连接存储，如下所示，

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Home extends Component {
  render() {
    console.log(this.props.profile)
    return (
      <div className="row">
      <div> Welcome to React-Redux
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    profile: state.user.profile
  }
}

export default connect(mapStateToProps)(Home);

带有React的完整源代码-Redux和演示