如何在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 (reducer)

...

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添加到你的连接中，

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} );
...
}

Answer 2

mapStateToProps将Store state作为参数/参数(由react-redux：：connect提供)，用于将组件与存储状态的特定部分链接起来。在您的例子中，您可以像这样使用。您还可以在组件中使用name、imgName作为props

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