要编写一个与Redux连接的HOC(Higher-Order Component)组件的敲击示例,你可以按照以下步骤进行操作:
npm install redux react-redux
store.js
的文件,并添加以下代码:import { createStore } from 'redux';
import rootReducer from './reducers/index';
const store = createStore(rootReducer);
export default store;
reducers/index.js
的文件,并添加你的根Reducer函数。例如:import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
const rootReducer = combineReducers({
counter: counterReducer,
});
export default rootReducer;
reducers/counterReducer.js
的文件,并添加你的计数器Reducer函数。例如:const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
Counter.js
的组件,并添加以下代码:import React from 'react';
import { connect } from 'react-redux';
const Counter = ({ count, increment, decrement }) => {
return (
Count: {count}
);
};
const mapStateToProps = (state) => {
return {
count: state.counter.count,
};
};
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Counter
组件。例如,在你的App.js
文件中添加以下代码:import React from 'react';
import Counter from './Counter';
const App = () => {
return (
My App
);
};
export default App;
现在,你已经创建了一个与Redux连接的HOC组件的敲击示例。当你点击"Increment"和"Decrement"按钮时,计数器会增加或减少。