Question

我正在使用ReactJS + Redux创建一个简单的英雄应用程序的在线教程。

我一步一步地按照步骤操作，我可以看到正在调用的 removeCharacterById 操作（我添加了console.log来removeCharacterById，以确保它被调用时，它会显示在控制台），但显然减速器不能正常工作。

动作/ index.js

export const ADD_CHARACTER = 'ADD_CHARACTER';
export const REMOVE_CHARACTER = 'REMOVE_CHARACTER';
export function addCharacterById(id) {
 const action = {
 type: ADD_CHARACTER,
 id
 }
 return action;
}
export function removeCharacterById(id) {
 const action = {
 type: REMOVE_CHARACTER,
 id
 }
 console.log('HeroesReducer',action);
 return action;
}

减速器/ characters_reducer.js

import characters_json from '../data/characters.json';
import { ADD_CHARACTER, REMOVE_CHARACTER } from '../actions';
import { createCharacter } from './helper';

function characters(state = characters_json, action) {
 switch(action.type) {
 case ADD_CHARACTER:
 let characters = state.filter(item => item.id !== action.id);
 return characters;

case REMOVE_CHARACTER:
 characters = [...state, createCharacter(action.id)];
 return characters;

default:
 return state;
 }
}
export default characters;

减速器/ heroes_reducer.js

import characters_json from '../data/characters.json';
import { ADD_CHARACTER, REMOVE_CHARACTER } from '../actions';
import { createCharacter } from './helper';

function heroes(state = [], action) {
 switch(action.type) {

case ADD_CHARACTER:
 let heroes = [...state, createCharacter(action.id)];
 return heroes;

case REMOVE_CHARACTER:
 heroes = state.filter(item => item.id !== action.id);
 return heroes;

default:
 return state;
 }
}
export default heroes;

HeroList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { removeCharacterById } from '../actions';
class HeroList extends Component {
 render() {
 console.log('this.props from HeroList',this.props);
 return(
 <div>
 <h4>Your Hero Squad:</h4>
 <ul className="list-group">

 {
 this.props.heroes.map(hero => {
 return (
 <li key={hero.id} className="list-group-item">
 <div className="list-item">
 {hero.name}
 </div>
 <div 
 className="list-item right-button"
 onClick={() => this.props.removeCharacterById(hero.id)}
 >
 X
 </div>
 </li>
 )
 })
 }
 </ul>
 </div>
 )
 }
}
function mapStateToProps(state) {
 return {
 heroes: state.heroes
 }
}
export default connect(mapStateToProps,  { removeCharacterById })(HeroList);

注意在action.js中有一个console.log，它在控制台中被调用。 onClick removeCharacterById被调用，但状态似乎没有更新。

addCharacterById按预期工作，ADD_CHARACTER操作也是如此。

REMOVE_CHARACTER无效。

我对ReactJs和Redux非常陌生，感谢一些帮助，谢谢！

更新：App.js和Index.js文件

import React, { Component } from 'react';
import CharacterList from './CharacterList';
import HeroList from './HeroList';

import '../style/index.css';
class App extends Component {
    render() {
        return (
                <div className="App">
                    <h2>SuperSquad</h2>
                        <div className="col-md-6">
                            <CharacterList />
                        </div>
                        <div className="col-md-6">
                            <HeroList />
                        </div>
                </div>

            )
    }
}

export default App;

index.js文件

import { combineReducers } from 'redux';

import characters from './characters_reducer';
import heroes from './heroes_reducer';



const rootReducer = combineReducers({
    characters,
    heroes
})
export default rootReducer;

ReactJs + Redux - Reducer工作/状态不更新

0 个答案: