无法使用组合减速器 REACT 显示数据答案

【问题标题】：Can't display data using combine reducer REACT无法使用组合减速器 REACT 显示数据
【发布时间】：2018-11-24 00:42:09
【问题描述】：

没有 redux 它可以工作所以不是 api 连接问题

我有一个连接到代理的快速应用程序我已经设法在反应中显示我的数据，但现在我想在 redux soo 中制作它：

这是我的问题，我已经完成了所有的减速器/动作、存储和组合减速器，但是我没有在我的页面中看到任何数据并且我没有任何错误

这是我的代码：

动作

export const api = ext => `http://localhost:8080/${ext}`;

//
// ─── ACTION TYPES ───────────────────────────────────────────────────────────────
//

export const GET_ADVERTS = "GET_ADVERTS";
export const GET_ADVERT = "GET_ADVERT";

//
// ─── ACTION CREATORS ────────────────────────────────────────────────────────────
//

export function getAdverts() {
  return dispatch => {
    fetch("adverts")
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERTS, payload });
      });
  };
}

export function getAdvert(id) {
  return dispatch => {
    fetch(`adverts/${id}`)
      .then(res => res.json())
      .then(payload => {
        dispatch({ type: GET_ADVERT, payload });
      });
  };
}

减速器

import { combineReducers } from "redux";
import { GET_ADVERTS, GET_ADVERT } from "../actions/actions";
const INITIAL_STATE = {
  adverts: [],
  advert: {}
};

function todos(state = INITIAL_STATE, action) {
  switch (action.type) {
    case GET_ADVERTS:
      return { ...state, adverts: action.payload };
    case GET_ADVERT:
      return { advert: action.payload };
    default:
      return state;
  }
}

const todoApp = combineReducers({
  todos
});

export default todoApp;

index.js

//imports
const store = createStore(todoApp, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,

  document.getElementById("app")
);

我的广告列表页面：

//imports..

class Adverts extends Component {


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

  render() {
    const { adverts = [] } = this.props;

    return (
      <div>
        <Header />
        <h1>Adverts</h1>
        {adverts.map(advert => (
          <li key={advert._id}>
            <a href={"adverts/" + advert._id}>
              {advert.name} {advert.surname}
            </a>
          </li>
        ))}

        <Footer />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  adverts: state.adverts
});

export default connect(
  mapStateToProps,
  { getAdverts }
)(Adverts);

【问题讨论】：

您是否检查过网络调用并确保 fetch 调用正常
没有redux它可以工作@Dineshundefined
你可以将console.logs放在actions、reducers和mapStateToProps中并检查

标签： javascript node.js reactjs action reducers

【解决方案1】：

我认为你的问题在这里：

function mapStateToProps(state) {
  return {
    **adverts: state.adverts**
  };
}

如果您将 state.adverts 更改为 state.todos.adverts，它应该可以工作：

function mapStateToProps(state) {
  return {
    adverts: state.todos.adverts
  };
}

因为你的 reducer 被称为 todos，它有状态 { adverts }，这就是为什么你不能访问广告，即使它们被获取。

您可以在此处查看工作版本：https://codesandbox.io/s/olqxm4mkpq

【讨论】：

另外，如果你只有一个 reducer，你就不需要 combineReducers。
没错，但他可能会在其中结合路由（因为他使用的是 react-router）或一些新的减速器。我想这只是以后的基础......
对于组合减速器，这是因为我想在未来使用更多的减速器:) @VinodSobale
没问题！我很高兴能帮上忙！ :)

【解决方案2】：

问题是，当你只用一个reducer创建一个store而不使用combine reducer时，可以直接在ContainerS中引用它，像这样：

const mapStateToProps = state => {
    
    return{
        *name of var*:  state.adverts   /*direct refers to adverts*/
    }
}

但是，当它使用 combine-reducer 时，它必须引用您要使用的确切 reducer。像这样：

const mapStateToProps = state => {
    
    return{
        *name of var* :  state.todos.adverts   (indirect refers to adverts from combined-reducer todos)
    }
}

【讨论】：