@acorn

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

Привет! Есть 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>
    )
}
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
function mapStateToProps(state) {
    console.log(state) // и здесь смотрите, есть ли у вас в state - state.potato, если нет, значит забыли это сделать в корневом редьюсере. А если есть, то смотрите что у вас хранится в state.potato.products
    return {
//potate-store
        products: state.potato.products
    }
}


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

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы