TypeError: store.getState is not a function. (In ‘store.getState()’, ‘store.getState’ is undefined how can i resolve this problem?

i want to cnnect redux-saga witdh react-native but this error keep happen…

TypeError: store.getState is not a function. (In ‘store.getState()’, ‘store.getState’ is undefined

Warning: Failed prop type: Invalid prop store of type function supplied to Provider, expected object

this is my code

  (index.js)


            import {AppRegistry} from 'react-native';
            import Root from './App';
            import {name as appName} from './app.json';

            AppRegistry.registerComponent(appName, () => Root);

(App.js)

    import React from 'react';
    import Store from './store/configureStore'
    import {Provider} from 'react-redux';
    import {App} from './src/index';

    const Root = () => {
      return (
        <Provider store={Store}>
          <App />
        </Provider>
      );
    };

    export default Root;

(src/index.js)

    import React from 'react';
    import Navigator from './Screens/Navigator';
    import styled from 'styled-components/native';

    const App = ({}) => {
      return (
        <Navigator/>
      );
    };

    export {App};

(store/cofigurestore.js)

     import { applyMiddleware, createStore, compose } from 'redux';
    import createSagaMiddleware from 'redux-saga';
    import { composeWithDevTools } from 'redux-devtools-extension';

    import reducer from '../reducers';
    import rootSaga from '../sagas';

    const Store = () => {
      const sagaMiddleware = createSagaMiddleware();
      const middlewares = [sagaMiddleware];
      const enhancer = process.env.NODE_ENV === 'production'
        ? compose(applyMiddleware(...middlewares))
        : composeWithDevTools(
          applyMiddleware(...middlewares),
        );
      const store = createStore(reducer, enhancer);
      store.sagaTask = sagaMiddleware.run(rootSaga);
      return store;
    };

    export default Store;

(reducer/index.js)

      import { combineReducers } from 'redux';

      import user from './user';
      import post from './post';

      // (이전상태, 액션) => 다음상태
      const rootReducer = (state, action) => {
        switch (action.type) {
          // case HYDRATE:
          //   // console.log('HYDRATE', action);
          //   return action.payload;
          default: {
            const combinedReducer = combineReducers({
              user,
              post,
            });
            return combinedReducer(state, action);
          }
        }
      };

      export default rootReducer;

(sage/index.js)

    import { all, fork } from 'redux-saga/effects';
    import axios from 'axios';

    import postSaga from './post';
    import userSaga from './user';



    export default function* rootSaga() {
      yield all([
        fork(postSaga),
        fork(userSaga),
      ]);
    }

please help me ……… i want to resolve this problem…… but i don’t know how can i do that

Answer

In you App.js you should be passing the result of calling you Store function to the Provider and not the function itself.

const Root = () => {
  return (
    <Provider store={Store()}>
      <App />
    </Provider>
  );
};

Advertisement

Answer