Redux - reducer nicht immer genannt

Ich versuche zu lernen Redux. Ich folgte einem online-tutorial und verwendet Ihr Beispiel und es funktionierte gut. Dann machte ich noch einen kleinen test app und es funktionierte gut. Jetzt versuche ich eine andere kleine test-app und ich bin stecken geblieben auf diese Fehlermeldung und habe keine Ahnung, warum.

Die app ist einfach nur ein Eingabefeld und eine Schaltfläche, und klicken Sie auf die Schaltfläche, es fügt sich ganz in die box, um eine Liste, die unten angezeigt wird.

Jedoch der reducer ist nicht die Aktualisierung der Staat. Ich habe die üblichen Probleme, die dies verursachen, und kann nicht scheinen, um diese Fehler in mir, mein Druckminderer nicht ändern, den Staat, und ich habe gebunden der Versand und so weiter. Vielleicht habe ich nur mispelled irgendwo etwas (oder etwas klein und dumm wie, dass), aber ich kann einfach nicht bekommen es funktioniert.

Also habe ich versucht, es zu ändern, so dass es zeigt nur, was Sie in das Feld unten ein und es funktioniert immer NOCH nicht. Wer weiß, warum der reducer nicht aktivieren?

index.js (main)

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import App from './components/App';

const logger = createLogger();
const store = createStore(
    allReducers,
    applyMiddleware(thunk, promise, logger)
);

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

App.js

import React from 'react';
import NameList from '../containers/name-list.js'
import Input from '../containers/input.js'

const App = () => (
  <div>
    <Input />
    <hr />
    <NameList />
  </div>
);

export default App;

index.js (Aktion)

export const addName = (name) => {
    return {
        type: 'NAME_ADDED',
        payload: name
    }
};

reducer-add-name.js

export default function (state = null, action) {
    switch (action.type) {
        case 'NAME_ADDED':
            return action.payload;
            break;
    }
    return state;
}

index.js (reducer combiner)

import {combineReducers} from 'redux';
import AddNameReducer from './reducer-add-name';


const allReducers = combineReducers({
    nameList: AddNameReducer
});

export default allReducers

input.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {addName} from '../actions/index'

class Input extends Component {
  render() {
    return(
      <div>
        <input id='name-input' />
        <button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({addName: addName}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Input);

name-list.js

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

class NameList extends Component {

  getNameList() {
    //This is where I'll loop through this.props.nameList and build the list of elements
    return this.props.nameList;
  }

  render() {
    return(
      <div>Current list : {this.getNameList()}</div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

export default connect(mapStateToProps)(NameList);

Vielen Dank für jede Hilfe!!!

  • Überprüfen Sie die Konsole auf Fehler. Auch ich kann nicht sehen, Ihr reducer exportieren AddNameReducer (was bei der Einfuhr in index.js), aber Sie kann nur knapp verfehlt haben, diese aus der post eher als der eigentliche code.
  • Es gibt keine Fehler-Konsole an jedem beliebigen Punkt. Und AddNameReducer ist nur die reducer-add-name.js Datei, die eine einzelne exportierte Funktion.
  • Die connect-Funktion in input.js ist mapping-Versand-Methoden, um Requisiten für die Input-Komponente. Also, wenn die Input-Komponente ist die render-Funktion ruft addName es erwarten würde, mit einem Verweis auf diesen als requisite? (Also versuchen, diese.Requisiten.addName)
  • Yep, das war es! 🙂 Vielen Dank!
InformationsquelleAutor Jayce444 | 2016-10-29
Schreibe einen Kommentar