Изменить состояние onClick React + Redux - PullRequest
Новая
       14

Изменить состояние onClick React + Redux

0 голосов
/ 08 октября 2018

Как я могу изменить значение состояния currentPage с помощью события onClick?Я хотел бы изменить значение после нажатия кнопки с номером страницы.

Компонент: 

import React from 'react';
import { connect } from 'react-redux';
import { setCurrentPage } from '../actions/pages';
const PageItem = ({ pageNumber }) => (
      <li className="page-link"
        onClick = {(e) => this.setCurrentPage(e) }
        id = { pageNumber }>
        { pageNumber }
      </li>
);
const mapStateToProps = (state) => {
  return {
    pages: state.pages.currentPage
  };
};
const mapDispatchToProps = (dispatch) => ({
  setCurrentPage: () => dispatch(setCurrentPage(pageNumber))
});
export default connect(mapStateToProps, mapDispatchToProps)(PageItem);

Редуктор: 

const pagesReducerDefaultState = { 
 currentPage: 1
};

export default (state = pagesReducerDefaultState, action) => {
  switch (action.type) {
    case 'SET_CURRENT_PAGE':
                return action.currentPage;
    default:
        return state;
  }
}

Действие: 

export const setCurrentPage = (currentPage) => ({
  type: 'SET_CURRENT_PAGE',
  currentPage
});

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Я исправил некоторые твои ошибки.Для начала, я предполагаю, что вы произвели разметку Provider в своем корневом компоненте и сделали экземпляр в хранилище (если вы не уверены, отправьте содержимое файла App.js).

// component 

const PageItem = ({ pageNumber, setCurrentPage }) => (
  <li
    className="page-link"
    onClick={() => setCurrentPage(pageNumber)}
    id={pageNumber}
  >
    {pageNumber}
  </li>
);

const mapStateToProps = state => {
  return {
    page: state.currentPage
  };
};
const mapDispatchToProps = {
  setCurrentPage
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PageItem);

const pagesReducerDefaultState = {
  currentPage: 1
};

Некоторые мысли:

  • вы не можете использовать this в функции, только в классе
  • mapDispatchToPropsможет использоваться с простым литеральным объектом (например, Я узнал это недавно ).Тогда это менее многословно, потому что вы можете упомянуть только action creator (в вашем примере setCurrentPage)
  • , который вы отправили setCurrentPage в реквизитах, так что вы можете получить его, как я написал.Может быть, ES6 здесь загадочен, поэтому эквивалент ES5 будет: 
function PageItem(props) {
  return (
    <li
      className="page-link"
      onClick={() => props.setCurrentPage(props.pageNumber)}
      id={props.pageNumber}
    >
      {props.pageNumber}
    </li>
  );

};

// reducer 

const initialState = {
  currentPage: 1
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_CURRENT_PAGE":
      return {
        currentPage: action.currentPage
      };
    default:
      return state;
  }
};
  • ваше состояние является объектом со свойством currentPage.Таким образом, ваш редуктор должен вернуть объект такого типа (поэтому return action.currentPage был неправильным)
0 голосов
/ 08 октября 2018

Обновите свое действие, как показано ниже.Действие должно быть отправлено так, чтобы редуктор мог справиться с этим .. 

export const setCurrentPage = (currentPage) => {
 return (dispatch) => {
  dispatch({type: 'SET_CURRENT_PAGE',currentPage);
 }
}
...