路由后无法从Redux存储读取状态

时间:2019-09-10 12:49:14

标签: redux store

我担心的是,重定向后我无法从redux存储中读取内容

<Link to="/to/path/:id"></Link>

该组件应该从参数中获取ID并从状态中读取。

这是我遇到的错误

enter image description here

这是减速器

我在1个单独的位置重新分组以更新状态。目前的动作列表很小

import { 
  ADD_BOOKING, 
  CONFIRM_BOOKING, 
  ADD_ORDER,
  EDIT_BOOKING
} from "../actions/actionTypes";

const initialState = {
  bookings: [], 
  order: {}
};

function rootReducer(state = initialState, action) {
  if (action.type === ADD_BOOKING) {
    return Object.assign({}, state, {
      bookings: state.bookings.concat(action.payload)
    });
  }
  if (action.type === EDIT_BOOKING) {
    return Object.assign({}, state, {
      bookings: state.bookings.map(booking => {
        console.log(booking.hotelDetails.id)
        console.log(action.payload.hotelDetails.id)
        if (booking.hotelDetails.id !== action.payload.hotelDetails.id) {
            return booking
        } 
        return Object.assign({}, booking, {
          resaDetails : action.payload.resaDetails
         // booking: action.payload
        })
      })
    })
  }
  if (action.type === ADD_ORDER) {
    return Object.assign({}, state, {
      order: action.payload
    })
  }
  return state;
}
export default rootReducer;

这是商店

import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;

这是应用程序根目录中的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from "./lib/store/index";

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

,这是我从中导航到特定酒店预订路径的文件。 路线的定义如下:“ / reservation /:id”

  • 参数中的ID允许我过滤预订并显示具有ID的酒店预订
  • 下面,它失败,因为预订为空。我无法从商店的状态中读取 enter image description here

这是我从下面导航的课程。抱歉,由于格式已关闭,粘贴代码无法正常工作。

1 个答案:

答案 0 :(得分:0)

删除store.subscribe,您已经在this.props.bookings中将值作为数组。下次也可以在codeandbox或类似环境中复制代码。