如何将更改的状态发送到 react-native 中的组件？

Question

我是 react 和 react-native 的初学者。 我正在使用 react 16、react-thunk、react-redux。

我正在尝试获取我已经从 firestore 创建的类别。 起初，我使用connect() 调用action，然后，我使用thunk 键入action，也从firestore 获取数据。 最后，我在 reducer 中返回了新的状态。 当然，我不知道redux过程，所以请给一些提示。

这是我的代码。谢谢。

CategoryImageList.js（组件）

...

class CategoryImageList extends Component {
  componentWillMount() {
    this.props.getCategory();
  }

  renderImages() {
      return this.state.categories.map(category =>
          <CategoryImageCard key={category.imgName} category={category}/>
      );
  }

  render() {
    return (
        <ScrollView>
            {/*{this.renderImages()}*/}
        </ScrollView>
    );
  }
}

export default connect(null, {getCategory})(CategoryImageList);

category.js（动作）

...
export const getCategory = () => {
  return (dispatch) => { //using redux-thunk here... do check it out
    getCategories()
        .then(querySnapshot => {
            const test = [];
            querySnapshot.forEach((doc) => {
                test.push(
                {
                    imgName : doc.data()['imgName'],
                    name : doc.data()['name']
                });
            });

            dispatch({ type: GET_CATEGORY, payload: test} );
        });
  };
};

CategoryReducers.js（减速器）

...

const categoryInitialState = {
  name: [],
  imgName: []
}

export const CategoryReducer = (state = categoryInitialState, action) => {
  switch (action.type) {
    case GET_CATEGORY:
        console.log(action);
        return { ...state, categoryImg: {
            name: action.payload.name,
            imgName: action.payload.imgName
        }};

    default:
        return state;
    }
}

App.js

...
type Props = {};
export default class App extends Component<Props> {
    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
        <Provider store={store}>
            <View style={{flex:1}}>
                <Header headerText={'FoodUp'}/>
                <CategoryImageList />
            </View>
        </Provider>
    );
  }
}

reducers/index.js

import { combineReducers } from 'redux';
import { CategoryReducer } from './CategoryReducer';

export default combineReducers({
    categories: CategoryReducer
});

更新 Firebase.js

const config = {
  ...
};

firebase.initializeApp(config);
const db = firebase.firestore();
const storage = firebase.storage();
const settings = {timestampsInSnapshots: true};
db.settings(settings);

export const getCategories = () => {
  return db.collection('categories').get();
}

export const getCategoryImg = (categoryName, imgName) => {
  const ref = storage.ref(`category/${categoryName}/${imgName}`);
  return ref.getDownloadURL();
}

Answer 1

mapStateToProps 将 Store 状态作为参数/参数（由 react-redux::connect 提供），用于将组件与 store 状态的特定部分链接。在您的情况下，您可以像这样使用。您可以在组件中使用 name、imgName 作为 props

const mapStateToProps = ({categories}) => {
    const { name, imgName } = categories;
    return {name, imgName};
};
export default connect(mapStateToProps, {getCategory})(CategoryImageList);

Answer 2

您必须将 mapstateToProps 添加到您的连接中，例如，

const mapStateToProps = (state: any) => {
  return {
    name: state.categories.name,
    imageName:state.categories.imageName
  };
}

export default connect(mapStateToProps)(CategoryImageList)

然后，您将能够访问名称和图像名称，例如， this.props.name 和 this.props.imageName

编辑：要分派GET_CATEGORY，您可以使用 mapDispatchToProps 或执行 getCategory 并从您的组件中分派，例如，

import {getCategory} from './category'

 componentWillMount() {
    this.props.getCategory(this.props.dispatch);
  }

并将 getCategory 函数更改为，

export const getCategory = (dispatch) => {
...
dispatch({ type: GET_CATEGORY, payload: test} );
...
}