извлечение данных в состояние не похоже на документирование - в mapStateToProps реагирует на нативный и избыточный - PullRequest
Новая
       7

извлечение данных в состояние не похоже на документирование - в mapStateToProps реагирует на нативный и избыточный

0 голосов
/ 26 января 2019

Я новичок, чтобы реагировать на родной и редукс. Когда я подключил свой компонент к хранилищу и использовал функцию mapStateToProps для сопоставления состояния с реквизитами компонента, я заметил, что состояние компонента находится в state.component_reducer, например, если я храню переменную isFetching в своем компоненте, то Я могу добраться до него в state.isFetching (как я читаю в документации о реагировании на избыточность), но в моем случае я могу добраться до него по адресу state.component_reducer.isFetching. Я думаю, что делаю что-то не так, но не могу понять, что это такое.

actions.js 

import OrdersAPI from '../../services/api/Orders'

export const REQUEST_ORDERS = 'REQUEST_ORDERS'
export const RECEIVE_ORDERS = 'RECEIVE_ORDERS'

export const requestOrders = username => ({
    type: REQUEST_ORDERS,
})

export const receiveOrders = (json) => ({
    type: RECEIVE_ORDERS,
    orders: json
})

const fetchOrders = username => dispatch => {
    dispatch(requestOrders(username))
    return OrdersAPI.getUserOrders(username)
      .then(json => dispatch(receiveOrders(json)))
}

// temp imp
const shouldFetchOrders = (state) => {
    const orders = state.orders
    if (!orders) {
      return true
    }

    return false;
}

export const fetchOrdersIfNeeded = username => (dispatch, getState) => {
    if (shouldFetchOrders(getState() == true)) {
      return dispatch(fetchOrders(username))
    }
}

компонентный редуктор - reducer.js 

import { REQUEST_ORDERS, RECEIVE_ORDERS } from './actions'

const INITIAL_STATE = {    
    orders: [],
}

function orders(state = INITIAL_STATE, action) {
    switch(action.type) {
        case REQUEST_ORDERS:
        return Object.assign({}, state, {
            ...state,
        })
        case RECEIVE_ORDERS:
        return Object.assign({}, state, {   
            ...state,
            orders: action.orders,
        })
        default:
            return state
    }
}

export default orders;

мой компонент - OrdersList.js 

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux'
import OrderCard from './OrderCard';
import { fetchOrdersIfNeeded } from './actions'

class OrdersList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { dispatch } = this.props
        dispatch(fetchOrdersIfNeeded("X"))
    }

  render() {
       const { orders } = this.props;
       const isEmpty = orders.length === 0
    return (
        isEmpty ? 
            <View>
                <Text>Wishlist Empty!</Text>
            </View> 
        :
        this.props.orders.map((order) => (
            <OrderCard key={order.OrderId.S} order={order} />
        ))
    );
  }
}

const mapStateToProps = (state) => {

    const orders = state.ordersReducer.orders;
    return {
      orders
    }
  }

export default connect(mapStateToProps)(OrdersList);

store.js 

import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import wishlistReducer from '../components/WishlistGridList/reducer'
import ordersReducer from '../components/YourOrders/reducer'

const rootReducer = combineReducers({
    wishlistReducer,
    ordersReducer
})

const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger())
}

const store = createStore(
    rootReducer,
    applyMiddleware(...middleware)
);

export default store;
...