проблемы с подключением дочернего компонента к магазину в приложении response-redux

Question

Я работаю над приложением реакции в первый раз и узнаю о редуксе. проблема: я определяю хранилище в App.js и передаю его в приложение, используя Provider bu, когда пытаюсь получить доступ к дочернему компоненту. У меня в консоли undefined после сопоставления его с mapStateToProps . пожалуйста, вы можете проверить мой код и сказать, что я делаю не так?

Я создаю 2 редуктора в папках, вызываем редукторы, вызываем index.js и testIt.js, после чего импортирую testIt.js в index.js, у которого есть combReducers для добавления редукторов функций. после того, как я экспортирую его в App.js и предоставлю хранилище, используя провайдера реагировать-редукса.

App.js

import React, { Component } from 'react';
import {BrowserRouter , Route} from "react-router-dom";
import { Provider } from 'react-redux';
import Store from "./reducers/index";
import { TestIt } from "./components/TestIt";

import './App.css';

//console.log(Store.getState());

class App extends Component {

  render() {
    return (

      <div className="App">
        <Provider store={Store}>
        <BrowserRouter>
          <Route exact path="/login" component={TestIt} />
        </BrowserRouter>
        </Provider>
      </div>

    );
  }
}

export default App;

редукторы / index.js

import { combineReducers, createStore } from 'redux';
import notes from "./testIt";

const leadApp = combineReducers({
  notes
})

export default createStore(leadApp);

редукторы / testIt.js

test .js

const initialState = [
    {text: "Write code!"}
  ];


  export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return state;
    }
  }

наконец, мой подкомпонент src / components / TestIt.js

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


export class TestIt extends Component {

  constructor(props){
    super(props)
  }


  render() {
    console.log(this.props.notes)
    return (
      <div>
        <h2>Welcome to TestIt!</h2>
        <hr />
        <h3>Notes</h3>
        <table>
          <tbody>
            {this.props.notes.map(note => (
              <tr>
                <td>{note.text}</td>
                <td><button>edit</button></td>
                <td><button>delete</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  }
}


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

// const mapDispatchToProps = dispatch => {
//   return {
//   }
// }


export default connect(mapStateToProps)(TestIt);

У меня есть this.props.notes, теперь я получаю undefined редукторов testIt.j . Я подозреваю что-то в магазине, которое передаю поставщику не достигает субкомпонента, даже если я выполняю соединение с помощью метода connect () . Я ожидаю получить доступ к редукторам testIt.js в моем подкомпоненте.

Пожалуйста, действительно нужна помощь, я стараюсь читать много статей и документации.

Answer 1

спасибо. я нахожу способ решить мою проблему удаление экспорта до класса в TestIt.js разрешит его.

Answer 2

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

не получает значение в state.notes, потому что вы назначаете состояние в notes.state

Ваш код: -

switch (action.type) {
  default:
    return state;
}

, поэтому вы получите значение в state.notes.state

Если вы хотите изменить свойство состояния, вы можете изменить код: -

export default function notes(state=initialState, action) {
    switch (action.type) {
      default:
        return {data:state};
    }
  }

подкомпонент src / components / TestIt.js

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

но это не хорошее решение, потому что у этих редукторов нет никакого типа действия, поэтому оно будет выполняться каждый раз.