如何解决“调度”是否必须称为“调度”,还是您可以直接调用调度而不标记它?
我一直在 redux 上调用 dispatch ,但我从未使用过“dispatch”这个词。我刚刚调用了这样的函数:
import React from 'react';
import {connect} from 'react-redux';
class RecipeList extends React.Component{
componentDidMount(){
console.log(this.props)
}
render(){
return(
<div>
<form>
<input />
<button>SEARCH</button>
</form>
</div>
)
}
}
const mapStatetoProps = (state)=>{
return {recipe_list: state}
}
const testing = ()=>{
return {
type:'TEST'
}
}
export default connect(mapStatetoProps,{testing: testing})(RecipeList);
可以接受吗?它有效。
解决方法
mapDispatchToProps 参数可以是 undefined、object 或 function。如果未定义,则 react-redux 会将 dispatch
添加到 props。
以下是 3 个示例,说明如何将其与 undefined、函数或对象一起使用,以及使用 react-redux hooks 的示例。我建议使用钩子,因为这是 React 的发展方向(而不是像 connect 这样的 HOC)。
const {
Provider,connect,useSelector,useDispatch,} = ReactRedux;
const { createStore,applyMiddleware,compose } = Redux;
const initialState = {
items: [{ id: 1,name: 'item 1' }],};
//action types
const DELETE = 'DELETE';
//action creators
const deleteItem = (id) => ({
type: DELETE,payload: id,});
const reducer = (state,{ type,payload }) => {
console.log('action:',type,'payload:',payload);
return state;
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,initialState,composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
//you should use reselect here but for simplicity I didn't
const mapStateToProps = (state,{ id }) => ({
item: state.items.find((item) => item.id === id),});
//if mapDispatchToProps is undefined then react-redux
// will add dispatch to props,here is how you can delete
const ItemMapDispatchUndefined = ({ item,dispatch }) => (
<button onClick={() => dispatch(deleteItem(item.id))}>
undefined - delete {item.name}
</button>
);
const ConnectedDispatchUndefined = connect(mapStateToProps)(
ItemMapDispatchUndefined
);
//if mapDispatchToProps is an object then react-redux
// will take the properties of that object and if a
// property is a functoin it will wrap that function
// in a new function that will automatically dispatch
// the return value when that function is called
const ItemMapDispatchObject = ({ item,deleteItem }) => (
// no dispatch needed but still need to pass id to deleteItem
<button onClick={() => deleteItem(item.id)}>
object - delete {item.name}
</button>
);
const ConnectedDispatchObject = connect(mapStateToProps,{
deleteItem,})(ItemMapDispatchObject);
//if mapDispatchToProps is a function then that function needs
// to return an object where each property of that object is a
// function that will dispatch an action. These properties
// will be added to component props by react-redux
const ItemMapDispatchFunction = ({ item,deleteItem }) => (
// no dispatch needed and no id needs to be passed
<button onClick={deleteItem}>
function - delete {item.name}
</button>
);
const ConnectedItem3 = connect(
mapStateToProps,(dispatch,{ id }) => ({
deleteItem: () => dispatch(deleteItem(id)),})
)(ItemMapDispatchFunction);
//using hooks (not using connect at all)
const Hooks = ({ id }) => {
//should use reselect but for simplicity not used
const item = useSelector((state) =>
state.items.find((item) => item.id === id)
);
const dispatch = useDispatch();
return (
<button onClick={() => dispatch(deleteItem(item.id))}>
hooks - delete {item.name}
</button>
);
};
const App = () => {
return (
<div>
<ConnectedDispatchUndefined id={1} />
<ConnectedDispatchObject id={1} />
<ConnectedItem3 id={1} />
<Hooks id={1} />
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。