React-Redux：不能使用商店

debugcn 发表于 Dev

内蒂

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

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;

我尝试使用connect（），但结果相同。

预先感谢您的帮助。

谢谢大家！我在减速机上弄错了。我只是意识到我没有回到状态

隆塞

您提供的代码中似乎缺少存储。尝试这个：

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图书馆

//在选择器中使用

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

//使用连接

首先，您需要importeconnect从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)

记住要查看react-redux文档

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。