Почему я не могу получить доступ к хранилищу Redux в дочернем компоненте React?

Question

Я пытаюсь понять, как я могу сопоставить свое состояние Redux с компонентом React.Я не совсем уверен, что здесь происходит, поэтому я просто опубликую код и сообщения об ошибках, которые я получаю.

Мой редукционный магазин:

const initialState = {
  userPosts: [{
    0: {
      content: 'Test post one',
      likes: 0
    },
    1: {
      content: 'Test post two',
      likes: 0
    },
    2: {
      content: 'Test post three',
      likes: 0
    }
  }]
}

console.log(initialState)

function likeReducer(state = initialState, action ){
  switch (action.type) {
    case 'LIKE':
      return {
        likes: state.likes  + 1
      };
      default:
        return state;
  }
}

function postReducer(state = initialState, action){
  switch (action.type){
    case 'POST':
    return{
      userPosts: 'Test'
    };
    default:
      return state;
  }
}

const rootReducer = combineReducers({like: likeReducer, post: postReducer})
const store = createStore(rootReducer, applyMiddleware(logger));

const render = (Component) => {
  ReactDOM.render(
    <Provider store={store}>
      <HashRouter>
        <Switch>
          <Route exact path='/' component={Component} />
          <Route path='/profile' component={Profile} />
        </Switch>
      </HashRouter>
    </Provider>,
    document.getElementById('react-app-root')
  );
};

render(App);
/*eslint-disable */
if (module.hot) {
  module.hot.accept('./components/App', () => {
    render(App)
  });
}
/*eslint-enable */

Компонент, к которому я пытаюсь получить доступ к магазину:

import Post from './Post';
import PropTypes from "prop-types";
import { connect } from 'react-redux';

function LiveFeed(props){

  console.log(props)

  return(
    <div className="liveFeed">
    {props.userPosts.map((post, index) =>
       <Post content={post.content}
         likes={post.likes}
         />
     )}
    </div>
  )
};

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

export default connect(mapStateToProps)(LiveFeed);

Я получаю следующую ошибку консоли :

Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного

У меня есть разные вариантыthis.props.userPosts, props.userPosts, userPosts и т. д., безрезультатно.

Answer 1

Это соединение, просто ваше состояние userPosts должно быть на самом деле ниже state.post.userPosts, а не state.userPosts - в вызове combineReducers вы указали, что состояние сообщений должно идти под postподдерево.

Попробуйте изменить state.userPosts до state.post.userPosts в mapStateToProps, и вы должны увидеть, как оно работает.

Обратите внимание, вы также захотите соответственно изменить структуру initialState- у вас должен быть объект like и объект post, а затем только передать соответствующее поддерево в качестве начального состояния в соответствующем редукторе:

const initialState = {
  post: {
    userPosts: [{
      0: {
        content: 'Test post one',
        likes: 0
      },
      1: {
        content: 'Test post two',
        likes: 0
      },
      2: {
        content: 'Test post three',
        likes: 0
      }
    }]
  },
  like: {
    likes: 0
  }
}

Примечание: это может быть вы на самом делехотите state.userPosts существовать, если это так, то вам следует переработать структуру редукторов - сделать что-то вроде

const rootReducer = combineReducers({ userPosts: postReducer, ... })

и просто postReducer вернуть массив сообщений, а не объект с полемuserPosts.

Answer 2

Ваши редукторы имеют разные объекты состояния и должны иметь разные начальные состояния.В вашей функции mapStateToProps добавьте console.log(state), и вы поймете, что я имею в виду.В этой же функции вы захотите сослаться на state.post.userPosts.

Answer 3

Вам необходимо поставить свой магазин как магазин на Provider от react-redux.Это можно сделать так:

ReactDOM.render(
  <Router history={history}>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </Router>,
  document.getElementById('root')
)

https://react -redux.js.org / api / provider