isssu与redux和apollo 2.x.x

时间:2018-04-26 08:01:01

标签: redux react-redux apollo react-apollo apollo-client

我应该如何在graphql旁边使用带有apollo 2.x.x的redux? 我有这个错误 " configureStore.js:11 Uncaught TypeError:无法读取属性' reducer'未定义的     at ./src/store/configureStore.js.exports.default" 它似乎与apollo的缓存实例有关

import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./routers/AppRouter";
import registerServiceWorker from "./registerServiceWorker";
// 1
import { ApolloProvider } from "react-apollo";
import { ApolloClient   } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from 'apollo-client-preset';
import {AUTH_TOKEN} from './lib/constants';
import configureStore from './store/configureStore';



import "./styles/App.css";

const httpLink = new HttpLink({ uri: "http://localhost:3000/graphql" });

const middlewareAuthLink = new ApolloLink((operation, forward) => {
    const token = localStorage.getItem(AUTH_TOKEN);
    const authorizationHeader = token ? `Bearer ${token}` : null
    operation.setContext({
      headers: {
        authorization: authorizationHeader
      }
    })
    return forward(operation)
  })

  const httpLinkWithAuthToken = middlewareAuthLink.concat(httpLink)
  console.log("httpLink",httpLink);

  console.log("httpLinkWithAuthToken",httpLinkWithAuthToken);


const store  =configureStore();

export const client = new ApolloClient({
    link: httpLinkWithAuthToken,
    cache: new InMemoryCache()
});


const jsx = (
    <ApolloProvider store={store} client={client}>
        <AppRouter />
    </ApolloProvider>
);

ReactDOM.render(jsx, document.getElementById("app"));

registerServiceWorker();

并以这种方式配置商店:

 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import {client} from "../app";
import thunk from "redux-thunk";
import { ApolloClient   } from "apollo-client";


export default ()=>{
    const store =createStore(
        combineReducers({
            // classes:classes , 
            apollo:client.reducer(),
        }),
        {}, //initial state
        compose(
            applyMiddleware(client.middleware()),
            thunk.withExtraArgument(client),
            // If you are using the devToolsExtension, you can add it here also
            (typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
        )
    );
    return srore;
}

0 个答案:

没有答案