Тип {} не может быть назначен для типа «ReactNode». как решить?

Question

[bazliiii]

Ошибка: Тип "defState" не может быть назначен для типа "ReactNode".
код:

interface defState{
    cash: number;
}
interface defAction {
    type: string;
    payload?: any;
}
const defaultState: defState = {
    cash: 0
}

export const CashReducer = (state = defaultState, action: defAction): defState => {
    switch (action.type) {
        case ADD_NUMBER:
            return { ...state, cash: state.cash + action.payload }
        case DEL_NUMBER:
            return { ...state, cash: state.cash - action.payload }
        default:
            return state
    }
}

Код страницы tsx:

function Pluser() {
    const dispatch = useDispatch()
    const cash = CashTypeSelector(state => state.cash)

    return (
        <div className='pluser'>
            <div className="container">
                <div className="pluser__inner">
                    <div className="pluser__top">
                        <button className="pluser__btn">plus</button>
                        <p className="pluser__text">{cash}</p>
                        <button className="pluser__btn">minus</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Pluser

Если что-то дополнительно нужно добавить пишите , не могу найти решение в интернете надеюсь на вас

Comments

[Антон Горецкий]

а какое расширение у файла с редюсером? .ts или .tsx ?

Answer 1

[Alexandroppolus]

const cash = CashTypeSelector(state => state.cash)

Судя по ошибке, в cash попадает не число, а объект {cash: number}

Что такое CashTypeSelector? Что лежит в Редуксе?

как исправить

const cash = CashTypeSelector(state => state.cash.cash);

Comments

[bazliiii]

Кастомный тип для UseSelector

export const CashTypeSelector: TypedUseSelectorHook<RootState> = useSelector

export const rootReducer = combineReducers({
    cash: CashReducer,
})

export type RootState = ReturnType<typeof rootReducer>

[Alexandroppolus]

ну да, всё так и есть.
CashTypeSelector - этот тот же useSelector, в который приходит весь редуксовый стейт.
последний является объектом

{
     cash: {
           cash: number;
     }
}

и ты в селекторе забираешь из него объект {cash: number}

как исправить:

const cash = CashTypeSelector(state => state.cash.cash);

[bazliiii]

Alexandroppolus, Спасибо! Опубликуй этот ответ, а то на комментарии не могу поставить правильный ответ

[Alexandroppolus]

bazliiii, дорисовал в ответе несколько букв