Question

我正在使用NextJs作为React应用程序的SSR。我想在页面首次加载时找到用户的地理位置。我正在尝试使用 react-redux ， redux 和 redux-thunk 来保持位置。

但是：

redux存储无法调度location（lat，long）。
动作功能，即当我将功能放置在getLocation中时会找到位置的功能（在我的情况下为componentWillMount()），会产生错误：

导航器未定义。

我正在关注以下示例：codepen link

redux / actions / locationActions.js

import { GET_LOCATION } from "../types";

const getLocation = () => {
  const geolocation = navigator.geolocation;

  const location = new Promise((resolve, reject) => {
    if (!geolocation) {
      reject(new Error("Not Supported"));
    }

    geolocation.getCurrentPosition(
      position => {
        resolve(position);
      },
      () => {
        reject(new Error("Permission denied"));
      }
    );
  });

  return {
    type: GET_LOCATION,
    payload: location
  };
};

export default {
  getLocation
};

redux / actions / index.js

import locationActions from "./locationActions";

export default {
  ...locationActions
};

redux / reducers / locationReducer.js

import { GET_LOCATION } from "../types";

const initialState = {
  coords: {
    latitude: 0,
    longitude: 0
  }
};

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_LOCATION:
      return { location: action.payload };
    default:
      return state;
  }
};

redux / reducers / index.js

import { combineReducers } from "redux";
import locationReducer from "./locationReducer";

const rootReducer = combineReducers({
  location: locationReducer
});

export default rootReducer;

redux / index.js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducers";

export const initStore = (initialState = {}) => {
  return createStore(reducer, initialState, applyMiddleware(thunk));
};

页面/_app.js

import React from "react";
import App, { Container } from "next/app";
import Head from "next/head";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import { initStore } from "../redux";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import StyleHeader from "../components/StyleHeader";

export default withRedux(initStore, { debug: true })(
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      return {
        pageProps: {
          ...(Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {})
        }
      };
    }

    render() {
      const { Component, pageProps, store } = this.props;
      return (
        <Container>
          <Provider store={store}>
            <StyleHeader />
            <Component {...pageProps} />
          </Provider>
        </Container>
      );
    }
  }
);

pages / index.js

import Link from "next/link";
import React from "react";
import { connect } from "react-redux";
import { MDBBtn, MDBCol, MDBContainer, MDBRow } from "mdbreact";
import Layout from "../components/Layout";
import Home from "../components/Home/Home";
import actions from "../redux/actions";

class Index extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.getLocation();
  }

  render() {
    return (
      <Layout>
        <Home />
      </Layout>
    );
  }
}

const mapStateToProps = state => {
  return { location: state.location };
};

export default connect(
  mapStateToProps,
  actions
)(Index);

我到底在做什么错？

谢谢。

React-NextJs无法获得地理位置

0 个答案: