нет

Забавно))

камрады, а есть какой вменяемый дейтпикер?

Я вчера просто прикрутил bootstrap-datepicker

Доброго времени суток, уважаемые. У меня проблема с принятием state из редусера. Дело в том, что я отслеживаю 3 шага. Отработал ли ГетПродукт из апи, отработал ли диспач с этими данными и отработал ли редусер с этими данными

У меня весь этот объект попадает в state

Но в компоненте его не существует!

Почему так, госпада??

Ну ты код, код кидай

А в react-router v4 IndexRoute нету?

Ну ты код, код кидай

А код чего именно скинуть? Весь же сюда не поместится(

Я б с удовольствием вас бы ознокомил с кодом

Покажи как мапишь стейт из редьюсера в компонент

componentWillMount(){ const { dispatch } = this.props; dispatch(getProductsIfNeed()); } render(){ console.log(this.props.product) return( <div> </div> ) } } function select(state){ return { product : state.product } } export default connect(select)(Phones);

А мапить нечего, он undefined говорит, потому что именно в компоненте пустой пейлоад

Покажи редьюсер

function productFetch(state=initState, action){ switch (action.type) { case 'FETCH_PRODUCT_SUCCESS': console.log('reducer', action.payload) return Object.assign({}, state, { payload: action.payload, isFetching: false, errorMessage: '' }); case 'FETCH_PRODUCT_ERROR': console.log('reducer', action.payload) return Object.assign({}, state, { errorMessage: action.errorMessage }); default: return state; } }

Вот точка входа export default function product(state = initState, action) { switch (action.type) { case "PRODUCT_FETCH_START": case "FETCH_PRODUCT_SUCCESS": case "FETCH_PRODUCT_ERROR": console.log('reducer', action.payload) return productFetch(state, action); default: return state; } }

У тебя в компоненте dispatch из props не пойму откуда возьмется

Ты же в connect его не передал

из экшена диспатч берется

export function getProductsIfNeed (){ return dispatch => { dispatch(getProdStart()); getProductList(json => { console.log('Отработал Гетпродукт', json.data) return dispatch(successCallback(json)); } ); } }

import { getProductsIfNeed } from '../actions/product'; в компоненте

Я про код в componentWillMount, ты достаешь dispatch из this.props

я б не стал морочиться с наследованиями и заюзал бы константы и обычные функции в одном файле. потом можно будет разрезать на разные файлы и экспортить их из индекс.жс

но это я — убеждённый противник паразитных наследований в жс

Я про код в componentWillMount, ты достаешь dispatch из this.props

Хотя не, фигню говорю

Нет, не фигню, я тоже не вижу никаких коннектов

Поэтому и надо скидывать весь код на gist, а не кусочки

Есть connect там ниже export default connect(select)(Phones)

аа, лол. Пропустил

MadMax покажи successCallback action

export function successCallback(payload) { console.log('dispatch', payload.data) return { type: 'FETCH_PRODUCT_SUCCESS', payload: payload.data }; }

А теперь getProductList

В payload.data все ок, судя по этому скрину

Ребята. Он в компонент приходит. Сначала пустой, потом отрабатывают все эти действия, которые законсоленные. Отрабатывает getproduct из апи, потом Диспач отрабатывает. потом редьюсер отрабатывает, ре-рендится, в консоль вновь приходит уже ПОЛНЫЙ объект, но я к нему не могу обратится почему то, только к пустому

function getProductList(successCallback, errorCallback){ axios.get('http://localhost:3001/api/product').then(response =>{ if(response){ successCallback(response); }else{ errorCallback(err); } }) }

сейчас вывел его в консоль

render(){ const { payload } = this.props.product; console.log('modules', payload.modules) return(

Эм

В чем проблема тогда?

:D

Это массив объектов, верно?

если я обращусь к нему по индексу, в ручную? Должен законсолится первый объект?

const { payload } = this.props.product; console.log('modules', payload.modules[0])

Наверняка это на этапе, где у тебя еще нет данных

Потому что в тот момент его еще нету

проверка нужна

Какая првоерка? На что?

Я делал Array.isArray

У тебя render отрабатывает несколько раз

на существование payload и payload.modules

в сам if рендер поместить?

Да

payload.modules && payload.modules.map(item =>

но перед этим надо Payload проверить еще выше

и поставить ему дефолтный {} может быть

const { payload = {} } = this.props.product;

if (payload && payload.modules && payload.modules.length) console

Грубо говоря

ERROR: S client not available

он про рендер

то есть про return я так понимаю

Странно

что именно?

if (payload && payload.modules && payload.modules.length) console

не лучше ли через lodash проверить ?)

_.isEmpty()

Я просто пытался объяснить проблему

payload в данном случае выглядит странно. Должно быть просто products.list

и можно его получить еще на этапе селектора

if (payload && payload.modules && payload.modules.length) console

Если выполняю такую првоерку, то выходит длина массива. Стоит мне поместить return в if под консоль вывод. То ругается консолька на

Uncaught Error: Phones.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object. at invariant (invariant.js:39)

я тебе выше написал как надо сделать

payload.modules && payload.modules.map(item =>

const { payload = {} } = this.props.product;

render(){ const { payload = {} } = this.props.product; if (payload && payload.modules && payload.modules.length){ console.log(payload.modules[0].address_id) return( <div> </div> ) }

это разве похоже на то, что я написал?

ты вот специально игнорируешь правильные ответы

Ну и напиши еще ветку кода, где modules нет

Не игнорирую.

else там, что-то еще

Но выше предложили лучше варианты, этот самый явный для демонстрации

В map функцию я указал ретурн

render(){ const { payload = {} } = this.props.product; payload.modules && payload.modules.map(item => { return( <div> </div> ) }) } верно ли я Вас понял?

Нет

оберни все в <div>

<div> { payload.modules ..... </div>

и это внутри return

render(){ const { payload = {} } = this.props.product; return ( <div> {payload.modules && payload.modules.map(item => { return( <div> {item.address_id} </div> ) })} </div> ); }

render(){ const { payload = {} } = this.props.product; return( <div> payload.modules && payload.modules.map(item => { // тут какой то html код } </div> ) }) }

ДАаааааааа

render(){ const { payload = {} } = this.props.product; return( <div> payload.modules && payload.modules.map(item => { // тут какой то html код } </div> ) }) }

Это не будет работать