Question

我正在尝试从购物清单组件访问Redux杂货数组，当我尝试使用this.props.groceries访问状态时，它返回'undefined'。我仍在尝试围绕Redux的一些概念，但我认为我真的很接近。在我的store.js中，我正在记录

store.subscribe(() => {
    console.log('store changed', store.getState());
});

并且getState（）显示我正确的杂货数组，其中包含所有杂货。我只是不确定如何从我的杂货列表组件访问此状态。谢谢！

我的GroceryList组件概述：

        import { connect } from "react-redux";
        import { bindActionCreators, createStore } from 'redux';
        import * as groceryActions from '../../redux/actions/grocery-actions';

        class GroceryList extends Component {
            constructor(props) {
                super(props);
                this.state = {
                };
            }
            addGroceryToList() {
                this.props.addGrocery(newGroceryItem);
                console.log(this.props.groceries); //Logs undefined
            }
            render() {
               return(
                  //something
               )
            }
        }

const mapStateToProps = (state) => ({
    groceries: state.groceries.groceries
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    { addGrocery: groceryActions.addGrocery, },
    dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(GroceryList);

杂货行动：

let groceryIndex = 0;

export const addGrocery = grocery => dispatch => {
    dispatch({
        type: 'ADD_GROCERY',
        id: groceryIndex++,
        grocery
    });
};

杂粮减速机：

export const groceries = (state = [], action) => {
    switch (action.type) {
        case "ADD_GROCERY":
            return [
                ...state,
                grocery(action.grocery, action),
            ];
        default:
            return state
    }
}

export const grocery = (state, action) => {
    switch (action.type) {
        case "ADD_GROCERY":
            return {
                id: action.id,
                grocery: action.grocery,
            };
        default:
            return state
    }
}

减速器组合器：

import { combineReducers } from 'redux';

import { groceries } from './grocery-reducer';

const reducer = combineReducers({
    groceries: groceries,
});

export default reducer;

商店

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import reducer from './reducers';

if (typeof window === 'undefined') {
    global.window = {}
}

const enhancer = compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__
    ? window.__REDUX_DEVTOOLS_EXTENSION__()
    : f => f
);

/* eslint-disable no-underscore-dangle */
const store = createStore(
    reducer,
    {}, // initial state
    enhancer
)

store.subscribe(() => {
    console.log('store changed', store.getState());
});

/* eslint-enable */

export default store

App.js

import { Provider, connect } from 'react-redux';
import { bindActionCreators } from "redux";
import * as groceryActions from "./src/redux/actions/grocery-actions";
import store from './src/redux/store';

class App extends React.Component {
    state = {
    };

    render() {
        return (
            <Provider store={store}>
                <Layout />
            </Provider>
        );
    }
}

export default (App);

无法从组件访问Redux阵列状态

0 个答案: