React-Redux：不能使用商店

Question

I'm new in React. And I'm studying Redux now. I understand how the library works, but I completely don't understand why my code doesn't. The problem is: React doesn't see the store . I can't use datas from the store.

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'));

App.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)

reducer.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;

I tried to use connect() but had the same result.

Thanks in advance for yours help.

Thanks to all! I mistaked in reducer. I just realized that I did not return state

Answer 1

store seems to be missing in the code that you provided. Try this:

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

Now to access your store, you can useSelector or connect from the react-redux library

// Using useSelector

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

// Using connect

You first need to importe connect from react-redux like this:

import {connect} from 'react-redux'

and use it like this

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)

Remember to check out the the react-redux documentation

Answer 2

Here's an example of how you could connect MainContainer to your redux state.

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);