React-Redux: не могу использовать магазин

Question

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

store. js:

   import {createStore} from "redux";
    import reducer from "./reducers/reducer";

    const initialState = {
      notes: [
        {
          name: "First note",
        },
        {
          name: "Second note",
        },
      ]
    };

   const store = createStore(reducer, initialState)
   export default store;

index. js:

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import store from "./store";
import App from './containers/App.js';

ReactDOM.render(
    (<Provider store={store}>
      <App />,
    </Provider>),
    document.getElementById('root'));

Приложение. js:

import React from 'react';
import MainContainer from "./MainContainer";
// import {connect} from "react-redux";
function App() {
  return (
   <div className="App">
     <MainContainer />
   </div>
  );
}

export default App;

MainContainer. js:

import React from 'react';
import {connect} from 'react-redux'

function MainContainer(props) {
  return (
      <div className="main-container">
        <ul>
          {props.notes.map(note => <li key={note.name}>{note.name}</li>)}
        </ul>
      </div>
  );
}

const mapStateToProps = state => ({
  notes: state.notes
});
export default connect(mapStateToProps)(MainContainer)

редуктор. js:

import uuid from 'react-uuid';

function reducer(state, action) {
  if (action.type === 'CREATE_NOTE') {
    return ({
          notes: [
            ...this.state.notes,
            {
              key: uuid(),
              id: uuid(),
              name: action.input,
              detail: action.inputTextArea,
            }
          ]
        }
    )
  }
}

export default reducer;

Я пытался использовать connect (), но у меня был тот же результат.

Заранее спасибо за вашу помощь.

Спасибо всем! Я ошибся в редукторе. Я только что понял, что не вернул состояние

Answer 1

* * * * * * * * * * * * * * * * Store store seems seems seems seems seems seems seems seems seems seems seems seems Похоже, что в указанном вами коде отсутствует магазин Попробуйте это:

import {createStore} from "redux";
import reducer from "./reducers/reducer";

const initialState = {
   notes: [
      {
         name: "First note",
      },
      {
         name: "Second note",
      },
   ]
};


const store = createStore(
     reducer,
     initialState
)

export default store

Теперь, чтобы получить доступ к вашему магазину, вы можете useSelector или connect из библиотеки react-redux

// Использование useSelector

import { useSelector } from 'react-redux'
const notes = useSelector(state => state.notes)

// Использование connect

Сначала вам нужно импортировать connect из react-redux следующим образом:

import {connect} from 'react-redux'

и использовать его вот так

const MyAwesomeComponent = (props)=> (
   props.notes.map(note => <li key={note.name}>{note.name}</li>)
)

const mapStateToProps = (state)=> {
   const { notes } = state
   return notes
}

export default connect(mapStateToProps)(MyAwesomeComponent)

Не забудьте проверить документацию о реакт-редуксе

Answer 2

Вот пример того, как вы могли бы подключить MainContainer к вашему состоянию избыточности.

import { connect } from "react-redux";

const MainContainer = props => {
  return (
    <ul>
      {props.notes.map(note => <li key={note.name}>{note.name}</li>)}
    </ul>
  ); 
}

const mapStateToProps = state => ({
  notes: state.notes
})

export default connect(mapStateToProps)(MainContainer);