reactjs - 为什么 mapStateToProps 没有显示任何更新（TypeScript、ReactJS、Redux）

Question

当我在输入字段中输入一些文本时，它会在我登录减速器时显示一些数据，console.log(state.genreList) 也会输出一个数组。但它不会更新 SearchInput.tsx 中的 mapStateToProps在action 和 reducer 中我看到该值被正确传递，但仍然困惑为什么它不会将它们传递给 mapStateToProps。我错过了什么吗？

为了让您更好地理解，我将添加一个代码框。

链接到代码框

// Reducer
import { types } from "../actions";

const initialState = {
    genreList: [],
    videoList: [],
    inputValue: ""
};

export const videoList = (state = initialState, action: any) => {
    switch(action.type) {
    case types.GET_DATA: {
        return {
            ...state,
            genreList: [...state.genreList, action.data]
        };
    }

    case types.GET_INPUT_VALUE: {
        return {
            ...state,
            inputValue: action.value
        }
    }

    default: 
        return state;
    }
};

export default videoList;

// Component
import React, {  useEffect } from 'react';
import { connect, useDispatch, ConnectedProps } from "react-redux";
import { getData, getInput } from "../../actions/index";
import axios from 'axios';

interface Genre {
    id: number;
    name: string;
}

interface Video {
    id: number;
    artist: string;
    title: string;
    release_year: number;
    genre_id: number;
    image_url: string;
}

interface IProps {
    genres?: Genre[];
    videos?: Video[];
    input_value?: string;
  }

export const SearchInput: React.FC<InputProps | IProps> = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('https://raw.githubusercontent.com/XiteTV/frontend-coding-exercise/main/data/dataset.json');
                dispatch(getData(response.data));
            } catch (err) {
                console.log(err)
            }
        }
        fetchData();
    }, [dispatch]);

    const passValue = (e: string) => {
        dispatch(getInput(e));
    }

    return (
        <div>
            <input type="text" onChange={(e) => passValue(e.target.value)}/>
            <div>Search Input</div>
        </div>
    )
}


function mapStateToProps(state: any){
    // why I dont see anything here????
    console.log(state);
    return {
        genres: state.genreList,
    }
}


const connector = connect(mapStateToProps);
type InputProps = ConnectedProps<typeof connector>;
export default connect(SearchInput);

Answer 1

问题

1. 您正在导入命名的导入，即未连接、未修饰的SearchInput组件。

   import { SearchInput } from './components/SearchInput/SearchInput';
   

2. 您没有SearchInput正确连接到您的 redux 商店。

   const connector = connect(mapStateToProps);
   type InputProps = ConnectedProps<typeof connector>;
   export default connect(SearchInput); // <-- mapStateToProps not used
   

解决方案

连接SearchInput到 redux。

const connector = connect(mapStateToProps); // <-- use connector
type InputProps = ConnectedProps<typeof connector>;
export default connector(SearchInput); // <-- here

默认导入连接的组件。

import SearchInput from './components/SearchInput/SearchInput';