Как отправить измененное состояние компоненту вact-native? - PullRequest
Новая
       6

Как отправить измененное состояние компоненту вact-native?

0 голосов
/ 03 июня 2018

Я новичок в реакции и родной реакции.Я использую «Реакция 16», «Реакция-thunk», «Реакция-Редукс».

Я пытаюсь выбрать категории, которые я уже сделал из firestore.Сначала я набрал action, используя connect(), а затем набрал action, используя thunk и извлек данные из firestore.Наконец я вернул новые состояния в редуктор.Определенно, я не знаю о процессе редукции, поэтому, пожалуйста, дайте несколько советов.

Вот мой код.Спасибо.

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

Редукторы / 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();
}

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Вы должны добавить 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

* 1007.* Редактировать: Для отправки 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} );
...
}
0 голосов
/ 03 июня 2018

mapStateToProps имеет состояние Store в качестве аргумента / параметра (предоставляемого response-redux :: connect) и используется для связывания компонента с определенной частью состояния хранилища.в вашем случае вы можете использовать как это.и вы можете использовать имя, imgName в качестве реквизита в вашем компоненте 

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