[英]Redux edit todo
I'm learning Redux. 我正在学习Redux。
Can someone explain step-by-step how to add edit functionality on this example: https://codepen.io/anon/pen/bxQOaw?editors=0010 有人可以在此示例中分步说明如何添加编辑功能: https : //codepen.io/anon/pen/bxQOaw?editors=0010
I have added actions and reducers but not sure how to pass it on the stateless components. 我添加了动作和简化器,但不确定如何在无状态组件上传递它。
Action: 行动:
export const editTodo = (text) => {
const action = {
type: 'EDIT_TODO'
}
console.log('action in editTodo', action);
return action;
}
Reducer: 减速器:
const todo = (state, action) => { switch (action.type) {
case 'EDIT_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
text: action.text
};
default:
return state; } }; const todos = (state = [], action) => { switch (action.type) {
case 'EDIT_TODO':
return state.map(t =>
todo(t, action)
);
default:
return state; } }
Do I need to convert those stateless components into classes? 我需要将那些无状态组件转换为类吗?
You should collect all your redux reducers into one giant reducer using combineReducers 您应该使用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;
Then in your root file, apply the combined redux reducer through the react-rudux provider. 然后在您的根文件中,通过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>
)
}
....
Then you can use them in your components with connect and bindActionCreators. 然后,您可以在具有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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.