redux-actions库，用于重构Typescript错误中的反例

jdgnovmf 于 2023-03-02 发布在 TypeScript

关注(0)|答案(2)|浏览(330)

我是Typescript的新手，想练习一个名为redux-actions的库。
https://youtube.com/watch?v=8DH7Ekp2PWI&feature=shares
我尝试使用redux-actions教程
https://redux-actions.js.org/introduction/tutorial
但是它不能像他们建议的那样在jsfidle或codepen中工作，所以我认为更好的方法是修改YouTube教程，并使用YouTube视频中代码库中的redux-actions库。
Youtube教程的代码库在github上。
https://github.com/Jon-Peppinck/react-redux-ts
但是，我有麻烦的行动和减速器组件。以下是我已经尝试
Counter.ts

export interface Counter {
    count: number;
}

CounterActions.ts

import { createActions } from "redux-actions";

export const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount }),
});

interface IncrementAction {
  type: typeof increment;
}

interface DecrementAction {
  type: typeof decrement;
}

export type CounterActionTypes = IncrementAction | DecrementAction;

CounterReducer.ts

import { handleActions } from "redux-actions";

import { CounterActionTypes, decrement, increment } from "./CounterAction";
import { Counter } from "./models/Counter";

const defaultState: Counter = {
  count: 0,
};

export const counterReducer = handleActions(
  {
    [increment]: (state: Counter, { payload: { amount } }: any): Counter => {
      return { ...state, count: state.count + amount };
    },
    [decrement]: (state: Counter, { payload: { amount } }: any): Counter => {
      return { ...state, count: state.count + amount };
    },
  },
  defaultState
);

但递增和递减操作显示错误：
计算属性名必须是“string”、“number”、“symbol”或“any”类型。ts（2464）
我也不确定我用any输入payload的方式，有没有更好的方式来输入它。我如何修复我的代码并防止错误？还有，有没有关于使用redux操作的资源或教程不是付费内容。我搜索了一下，但我找不到任何东西。

redux

来源：https://stackoverflow.com/questions/75600108/redux-actions-library-to-refactor-a-counter-example-in-typescript-errors

2条答案

按热度按时间

yuvru6vn1#

我是还原版的维护者。

请 * 不要 * 使用redux-actions！

它已经过时了，使用它需要编写大量您不需要编写的代码。
相反，今天您应该使用我们的官方Redux工具包。RTK旨在简化和标准化Redux使用模式，并与TypeScript配合使用。
以下是使用RTK时的示例（以及额外的大小写缩减器）：

// File: src/features/counterSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit"

interface CounterState {
  value: number;
}

const initialState : CounterState = {
  value: 0
}

const counterSlice = createSlice({
  name: "counter",
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
})

export const {
  increment, 
  decrement, 
  incrementByAmount
} = counterSlice.actions;

export default counterSlice.reducer

有关如何以及为什么使用Redux Toolkit的详细信息，请参阅我们的文档：

赞(0）回复(0）举报 2023-03-02

9rbhqvlz2#

看起来问题出在[increment]上，我不明白为什么文档中是这样的，但是嘿，它已经4年了。
但对我有效的是：CounterActions.ts

import {createActions} from 'redux-actions'

export interface ActionPayload {
  amount: number
}

export enum ActionNames {
  INCREMENT = 'increment',
  DECREMENT = 'decrement',
}

export const {increment, decrement} = createActions<ActionPayload>({
  [ActionNames.INCREMENT]: (amount = 1) => ({amount}),
  [ActionNames.DECREMENT]: (amount = 1) => ({amount: -amount}),
})

interface IncrementAction {
  type: typeof increment
}

interface DecrementAction {
  type: typeof decrement
}

export type CounterActionTypes = IncrementAction | DecrementAction

CounterReducer.ts

import {handleActions} from 'redux-actions'

import {ActionNames, ActionPayload} from './CounterAction'
import {Counter} from './models/Counter'

const defaultState: Counter = {
  count: 0,
}

export const counterReducer = handleActions<Counter, ActionPayload>(
  {
    [ActionNames.INCREMENT]: (state, {payload: {amount}}) => {
      return {...state, count: state.count + amount}
    },
    [ActionNames.DECREMENT]: (state, {payload: {amount}}) => {
      return {...state, count: state.count + amount}
    },
  },
  defaultState
)

赞(0）回复(0）举报 2023-03-02

我来回答

redux-actions库，用于重构Typescript错误中的反例

2条答案

相关问题

热门标签

最新问答