在TypeScript中输入Redux state以创建没有项目的新状态,可以按照以下步骤进行:
npm install redux react-redux
appState.ts
,用于定义和管理应用程序的状态。appState.ts
文件中,首先导入必要的Redux和React-Redux库:import { createStore, combineReducers } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
// 初始状态
const initialState = {
count: 0
};
// Redux动作类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
// Redux动作创建函数
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });
// Redux reducer函数
const counterReducer = (state = initialState, action: any) => {
switch (action.type) {
case INCREMENT:
return { ...state, count: state.count + 1 };
case DECREMENT:
return { ...state, count: state.count - 1 };
default:
return state;
}
};
// 根reducer函数
const rootReducer = combineReducers({
counter: counterReducer
});
// 创建Redux store
const store = createStore(rootReducer);
Provider
组件将Redux store提供给整个应用程序:import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './appState';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
useSelector
钩子函数选择所需的状态:import React from 'react';
import { useSelector } from 'react-redux';
const Counter = () => {
const count = useSelector((state: any) => state.counter.count);
return (
<div>
<p>Count: {count}</p>
</div>
);
};
export default Counter;
通过以上步骤,我们可以在TypeScript中输入Redux state,创建一个新的状态,并在应用程序中使用它。请注意,这里没有提及具体的腾讯云产品和链接地址,因为与问题的内容无关。
领取专属 10元无门槛券
手把手带您无忧上云