Как установить или передать через redux state компоненту?

Question

[acorn]

Привет! Есть Action и Reducer. Через reducer думал загружать локальный файл с данными. Компоненты без state отображали данные через props и компонент жизненного цикла componentDidMount
Но чуда не происходит, не понимаю в чем может быть проблема?
Пишет,что ошибка в map() :Cannot read property 'map' of undefined
Action

//local file 
import { sampleProducts } from '../sample-products';

export function fetchProducts () {
    return dispatch => {
        dispatch({
            type: "FETCH_PRODUCTS",
            payload:  sampleProducts
        })
    }
}

Reducer

const initialState = {
    products: []
};

export default (state = initialState, action={}) => {
    switch (action.type) {
        case "FETCH_PRODUCTS":
            return{
                ...state,
                products: action.payload
            };
        default:
            return state
    }
}

Component father

import { fetchProducts } from "../../actions/product_action";
import ProductList from './ProductList';

class ProductPage extends Component {

    componentDidMount() {
        this.props.fetchProducts();
    }
    render() {
   
        return (
            <div>
                <h2>List og products</h2>
                    <ProductList products={this.props.products}/>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
//potate-store
        products: state.potato.products
    }
}

export default connect(mapStateToProps,{fetchProducts })(ProductPage);

Component child

import React from "react";

export default function ProductList({products}){

    const list = () => {
        return products.map(product => {
            return (
                <li key={product.id}>{product.title}</li>
            )
        })
    };
    return (
        <div>
            <ul>
                { list() }
            </ul>
        </div>
    )
}

Answer 1

[Максим]

function mapStateToProps(state) {
    console.log(state) // и здесь смотрите, есть ли у вас в state - state.potato, если нет, значит забыли это сделать в корневом редьюсере. А если есть, то смотрите что у вас хранится в state.potato.products
    return {
//potate-store
        products: state.potato.products
    }
}

Скиньте свой корневой редьюсер, который вы передаете в configureStore функцию, если не разберетесь.

Comments

[acorn]

Я передал, в редакторе redux в state potate есть редьюсер productReducer и данные локального файла

import { combineReducers } from 'redux';

import ProductReducer from "./product_reducer";
import { localeReducer } from 'react-localize-redux';

const rootReducer = combineReducers({ 
    productReducer: ProductReducer
});

export default rootReducer;

[Максим]

acorn, не понял что у вас там есть... по коду я potato не вижу. Вы же в консоли уже можете до ваших данных достучаться. По всей видимости products: state.productReducer.products

[acorn]

Максим, прошу прощения:

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
);
let store = createStore(combineReducers({
    potato: rootReducer,
    locale: localeReducer}),
    {},
    composedEnhancers,
    window.STATE_FROM_SERVER);

[Максим]

acorn, вы console.log прописали? Откройте браузер, откройте devTools, разверните объект state и посмотрите что в нем.. (заодно скрин сюда скиньте)

[acorn]

да, там все есть

console.log

redux

[acorn]

Изменил немного код в дочернем компоненте.
Дало понять ,что в props.products пусто, поэтому ему нечего map().
Но удивительно то,что начальное состояние изменилось и все данные видны в actions

import React from "react";
export default function ProductList({products}){

const list = () => {
        if(products){
            return products.map(product => {
                return (
                    <li key={product.id}>{product.title}</li>
                )
            })

        }else{
            return []
        }
            };

[acorn]

Исправил, дело было в mapStateToProps. Видимо из-за вложенности ,нужны было указать путь к state products:

state.potato=>productReducer=>products

function mapStateToProps(state) {
    return {
//potate-store
   products: state.potato.productReducer.products
    }
}

[Максим]

acorn, Гуд! запомните этот способ с console.log ) еще не мало раз вас выручит.