开发者问题收集

为什么这些数据不发送到redux?

2018-02-26
45

我是 Redux 的新手,我想我开始了解它的工作原理,但我在将数据导入 Store 时遇到了一些初始问题。

我相信我已经很接近了,但就是有一些东西我没有得到。任何帮助都非常感谢!

我需要这个工作的原因是因为我有其他组件可以使用相同的数据,所以我认为最好将数据保存在 Redux Store 中。如果有其他方法可以解决这个问题,请告诉我。

操作:

import fetch from "isomorphic-fetch";

export const LOAD_DATA     = "LOAD_DATA";

function getApiUrl() {
return `${window.appDefaultState.url.baseUrl}/api`;
}

export function loadStoresData() {
  return function(dispatch) {
    dispatch({
      type: LOAD_DATA,
      stores: data
    });
fetch(
  getApiUrl(),
  {
    method: "post",
    credentials: 'same-origin',
    body: JSON.stringify({
      form_key: window.appDefaultState.formKey,
      "cms/stores": 1
    })
  }
)
.then(response => response.json())
.then(json => {
  console.log("fetched data in actions")
  let data = json["cms/stores"];
  console.log(data);
  dispatch({
    type: LOAD_DATA,
    stores: data
  });
})
.catch(e => {
  console.log(e)
});
}
}

function getSuccess(data) {
  console.log("getSuccess worked")
  return (
    type: LOAD_DATA,
    stores: data
  )
}

Reducer:

import {
  LOAD_DATA
} from "actions/storelist.js";

function initialState() {
  return Object.assign({}, {
    stores: {},
  }, window.appDefaultState.storeList);
}

export default function storeList(state, action) {
  if (!state) {
    state = initialState();
}

switch (action.type) {
  case LOAD_DATA:
    return Object.assign({}, state, {
      stores: action.data
  });
  break;
}

return state;
}

组件(相关部分):

import { connect }                  from "react-redux";
import { loadStoresData }           from "actions/storelist.js";

const actions = {
  loadStoresData
}

const mapStateToProps = (state, ownProps) => {
  return Object.assign({
    stores: state.stores
}, ownProps);
};

export default connect(mapStateToProps, actions)(StorePage);
1个回答

您在 stores 字段中调度 data ,因此它应该是

switch (action.type) {
  case LOAD_DATA:
    return Object.assign({}, state, {
      stores: action.stores
    });
}

action.data 替换为 action.stores

Arun Ghosh
2018-02-26