Могу ли я уменьшить количество дубликатов машинописного текста в моем коде?

Question

Итак, у меня есть файл действий, определяющий следующее:

export const LogInUser = (user:User, token:string) => ({
  type: UserActions.LoginUser, payload: {
    user: user, token: token
  }
})

Awesome.

Чтобы подключить его, я пишу метод mapDispatchToProps:

const mapDispatchToProps = (dispatch:any)=>({
  loginUser: (user:User, token:string)=>{dispatch(LogInUser(user, token))}
})

Так что теперь я в основном дублирую существующую сигнатуру метода. Хорошо, я могу жить с этим. На самом деле это хорошая идея - что если подпись метода моего действия отличается от того, что я хочу показать на реальной странице по какой-то причине? Конечно, именно поэтому мы делаем это таким образом. Мне не нужна эта дополнительная сила, но это может быть удобно.

Но теперь я должен пойти к моим реквизитам и дублировать его снова :

interface Props extends RouteComponentProps<any>{
  loginUser: (user:User, token:string)=>void
}

На данный момент мне интересно, почему диспетчеризация не просто передается в базовый класс для начала, а не включается в вызовы методов. Должна быть некоторая причина, примерно в каждом уроке, который я видела, используется этот базовый шаблон - хотя, если быть честным, большинство из них - это JavaScript, а не машинопись, и они не приводят к написанию и повторному написанию. написание одного и того же объявления метода несколько раз.

Answer 1

Да, есть несколько методов, которые вы можете использовать, чтобы упростить все это.

Во-первых, мы рекомендуем использовать форму «сокращение от объекта» mapDispatch вместо ее определения. как функция:

// could be shorter if the function names matched
const mapDispatch = {loginUser: LogInUser} 

// or, even just pass UserActions to connect directly

Во-вторых, наш новый пакет Redux Starter Kit - это наш рекомендуемый набор инструментов для написания более простого кода Redux с хорошими практиками. Он включает в себя a createSlice функцию , которая автоматически генерирует создателей действий и типы действий автоматически, поэтому вам не нужно писать их вручную:

type UsersState = {
    user : User | null,
    token: string | null;
}

const usersSlice = createSlice({
    name: "users",
    initialState: {user: null, token: null} as UsersState,
    reducers {
        loginUser(state, action: PayloadAction<{user: User, token: string>}) {
            return action.payload;
        }
    }
})

// usersSlice.actions.loginUser was automatically generated

У вас TS автоматически выводитьтипы, переданные из connect в ваш собственный компонент с использованием подхода ConnectedProps<T>, который я описал в https://stackoverflow.com/a/58630099/62937.

И, наконец, наш новый API-интерфейс перехватчиков React-Redux как правило, проще вводить статически, чем connect, в том числе устранять необходимость вообще определять mapDispatch.

И по вашему другому вопросу dispatch передается подключенному компоненту, если вы не используетеmapDispatch не приводим в качестве аргумента , но мы всегда рекомендовали использовать создателей действий, чтобы ваши компоненты "не знали о Redux" .

Я бы посоветовал прочитать Страница документации "Advanced Tutorial" для Redux Starter Kit , где приведены примеры использования RSK с перехватчиками TypeScript и React-Redux.