- 安装相关依赖:
- 使用 npm 或 yarn 安装
redux
和 react-redux
。在项目根目录下运行 npm install redux react-redux
或 yarn add redux react-redux
。
- 初始化 Redux:
- 创建 Redux 的
store
。在项目中创建一个 store.js
文件,引入 createStore
等相关方法。例如:
import { createStore } from'redux';
// 创建reducer,例如一个简单的counter reducer
const counterReducer = (state = { value: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 };
case 'DECREMENT':
return { value: state.value - 1 };
default:
return state;
}
};
const store = createStore(counterReducer);
export default store;
- 在 Qwik 组件中使用 Redux 的状态和 dispatch 方法:
- 在 Qwik 项目中,通过
Provider
组件将 store
传递给整个应用。在 main.tsx
或入口文件中:
import { render } from '@builder.io/qwik';
import { Provider } from'react-redux';
import store from './store';
import App from './App';
render(() => (
<Provider store={store}>
<App />
</Provider>
), document.getElementById('root'));
- 在 Qwik 组件中使用 `useSelector` 和 `useDispatch` 钩子来获取状态和分发 action。例如在某个组件 `Counter.tsx` 中:
import { useSelector, useDispatch } from'react-redux';
import { Component$ } from '@builder.io/qwik';
const Counter: Component$ = () => {
const count = useSelector((state: any) => state.value);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
export default Counter;