0

Есть вот такой смарт компонент

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Filter from '../Filter';
import Sort from '../Sort';

import { getItems, selectItem, reverseItems, findItems } from '../../actions/items';

import './app.css';

const App = ({filterList, sortList,  onGetItems, onFindItems, reverseItems, onSelectItem}) => {

onGetItems();

return (
    <div>
        <Filter items={filterList} findText={onFindItems} reverseItems={reverseItems} selectItem={onSelectItem} />
        <Sort items={sortList} selectItem={onSelectItem} />
    </div>
)}


function mapStateToProps(state) {
    return {
        filterList: state.items.filter(item => item.name.includes(state.filter.toLowerCase())),
        sortList: state.items,
    }
  }


 function matchDispatchToProps(dispatch) {
     return bindActionCreators({
    onGetItems: getItems,
    onSelectItem: selectItem,
    onFindItems: findItems,
    reverseItems: reverseItems
}, dispatch)}

export default connect(mapStateToProps, matchDispatchToProps)(App);

Есть вот такие экшны:

            let items = [];

            (function onGetItems() {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', '/items.json', false);
                xhr.send();
                if (xhr.status !== 200) {
                    console.log(xhr.status + ': ' + xhr.statusText);
                } else {
                    items = JSON.parse(xhr.responseText.toLowerCase());

                    items.sort(function(a, b) {
                        if (a.name > b.name) return 1;
                        if (a.name < b.name) return -1;
                        return 0;
                    });
                }
            })();

            export const getItems = () => dispatch => {
                dispatch({ type: 'ADD_ITEMS', payload: items });
            }

            export const selectItem = (item)  => {
                console.log(item);
                return {
                    type: "ITEM_SELECTED",
                    payload: item
                }
            };

            export const reverseItems = (items)  => {
                console.log(items)
                return {
                    type: "REVERSE_ITEMS",
                    payload: items.reverse()
                }
            };

            export const findItems = (items)  => {
                return {
                    type: "FIND_ITEMS",
                    payload: items
                }
            };

И конечно же есть пара редьюсеров:

            const initialState = '';

            export default function filter(state = initialState, action) {
                switch (action.type) {
                    case 'FIND_ITEMS': return action.payload;
                    default: return state
                }
            }

            const initialState = [];

            export default function items(state = initialState, action) {
                switch (action.type) {
                    case 'ADD_ITEMS': return action.payload;
                    default: return state
                }
            }

А проблема в том, что action reverseItems делает реверс массива, всё ок. Но я не могу понять как сделать так, чтобы передать данные в state и чтобы он перерендарил компонент.

Я понимаю, что вопрос из разряда "это же основы". Но я только учусь и не могу увязать всё это в одну кучу) Бьюсь уже пару дней и не могу уловить как это сделать.

2 ответа 2

0
 export const reverseItems = (items)  => {
   console.log(items)
   return {
     type: "REVERSE_ITEMS",
     payload: items.reverse()
   }
 };

 export default function filter(state = initialState, action) {
   switch (action.type) {
     case 'FIND_ITEMS': return action.payload;
     default: return state
   }
 }

В action в payload вы передает items.reverse(), соответственно в reducer вы можете получить этот массив из action.payload.
Добавить в этот reducer обработку события "REVERSE_ITEMS":

export default function filter(state = initialState, action) {
  switch (action.type) {
    case 'FIND_ITEMS': return action.payload;
    case 'REVERSE_ITEMS': return action.payload;
    default: return state
  }
}
4
  • Это замечтально и это я понимаю, но как потом мне всё это передать в компонент Filter, при учёте того, что туда уже передаются изначально полученные данные и они в придачу фильтруются. И новые данные также должны быть отфильтрованы 13 мар 2017 в 23:10
  • Как у вас reducers комбинируется? Может вам как раз надо посмотреть в сторону combineReducers? Скорее всего в компоненте в mapStateToProps вам нужно получать элементы из state.filter
    – qpeela
    14 мар 2017 в 4:14
  • combineReducers также используется. в state.filter передаётся просто введенный текст в инпут и исходя из него филтруются все items 15 мар 2017 в 1:24
  • Тогда попробуйте добавить в reducer items обработку case 'REVERSE_ITEMS': return action.payload;
    – qpeela
    15 мар 2017 в 10:11
0

Вы должны реверсировать ваш массив в редьюсере а не в экшене. Экшена диспатчится в стор, редьюсер меняет стейт (ваш массив), а изменение стерта уже влечет ререндер компонента.

function app(state = initialState, action) {
  switch (action.type) {
    case 'REVERSE_ITEMS':
      return Object.assign({}, state, {
        items: action.payload.reverse()
      })
    default:
      return state
  }
}

Ваш компонент должен быть задекорирован при помощи connect

import { connect } from 'react-redux'
import Filter from '../components/Filter'

const mapStateToProps = (state, ownProps) => {
  return {
    items: state.items
  }
}

const Filter = connect(
  mapStateToProps,
)(Filter)

export default Filter

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.