Question

我正在学习Redux。

有人可以逐步说明如何在此示例中添加编辑功能： https://codepen.io/anon/pen/bxQOaw?editors=0010

我添加了动作和简化器，但不确定如何在无状态组件上传递它。

操作：

@HostListener('click', ['$event'])
public onHostClick(event: Event) {
  event.stopPropagation();
}

@HostListener('document:click', ['$event'])
public onDocumentClick(event: Event) {
  this.clickOutside.emit(null);
}

减速器：

export const editTodo = (text) => {
    const action = {
      type: 'EDIT_TODO'
    }
    console.log('action in editTodo', action);
    return action;
}

我需要将那些无状态组件转换为类吗？

Answer 1

您应该使用CombineReducers将所有Redux减速器收集到一个巨型减速器中

import ToDoReducer from './todo-reducer.js';
import OtherReducer from './other-reducer.js';
import {combineReducers} from 'redux';

const allReducers = combineReducers({
    ToDo:ToDoReducer,
    OtherR:OtherReducer,
});

export default allReducers;

然后在您的根文件中，通过react-rudux提供程序应用组合的redux reducer。

import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

const store = createStore(allReducers, applyMiddleware(thunk));

class App extends React.Component{
render(){
    return(
        <Provider store={store}>
            <YourSecondaryMainComponent />
        </Provider>
    )
}
....

然后，您可以在具有connect和bindActionCreators的组件中使用它们。

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

import editTodo from './todoFunctions.js';

class myComponent extends React.Component{
   ...
}

let mapStateToProps = (state)=>{return {ToDo:state.ToDo}; };
let matchDispatchToProps = (dispatch)=>{ return bindActionCreators({ editTodo }, dispatch); }
export default connect(mapStateToProps,matchDispatchToProps)(myComponent);

Redux编辑待办事项

1 个答案: