Простое приложение агрегатор новостей через api newsapi с возможностью подписаться на журнал и видеть новости в ленте.
Есть два экрана: первый - лента новостей, второй - список журналов с кнопкой подписки. При нажатии на кнопку срабатывает action и обновляет в state объект со списком журналов. Все обновляется, данные приходят, но компонент не перерисовывается, ни экран с лентой новостей, ни кнопка не изменяется (должна меняться иконка).
Компонент вывода списка журналов
class JournalList extends PureComponent {
static navigationOptions = ({ navigation }) => ({
header: (
<HeaderBack navigation={navigation} />
)
});
state = {
journals: [],
loading: true,
};
componentDidMount = () => {
this.getJournals();
};
getJournals = async () => {
const { navigation } = this.props;
this.setState({ loading: true });
// prettier-ignore
const url = `https://newsapi.org/v2/sources?country=${navigation.state.params.country}&apiKey=${apiKey["api"]}`;
let journalResp = await fetch(url);
let journalData = await journalResp.json();
this.setState({
loading: false,
journals: journalData.sources
});
};
toggleSubToJournal = (name, id) => {
this.props.journalSubscriptions[name] ?
this.props.unsubscribeToJournal(name, id) :
this.props.subscribeToJournal(name, id)
};
renderRow = journal => {
const { journalSubscriptions } = this.props;
return (
<RowCard
text={journal.item.name}
iconName={
journalSubscriptions[journal.item.name] ? "heart" : "heart-outlined" // Здесь должна меняться иконка
}
onPress={() => this.openModal(journal.item.name, journal.item.description)}
onPressIcon={() => this.toggleSubToJournal(journal.item.name, journal.item.id)}
/>
);
};
renderResults = () => {
const { journals } = this.state;
return (
<FlatList
data={journals}
renderItem={this.renderRow}
keyExtractor={(item) => item.id}
/>
);
};
render() {
return this.state.loading ? <DefaultLoader /> : this.renderResults();
}
}
const mapStateToProps = state => {
return {
journalSubscriptions: state.journalSubscriptions
};
};
const mapDispatchToProps = dispatch =>
bindActionCreators(ActionCreators, dispatch);
export default connect(
mapStateToProps,
mapDispatchToProps
)(JournalList);
Action
const subscribeToJournal = ( journalName, journalID) => {
return async dispatch => {
let userID = firebase.auth().currentUser.uid;
let database = firebase.database();
let userResponse = await database.ref("/" + userID);
let userFollowResponse = await userResponse.once("value");
let userFollowData = await userFollowResponse.val();
if (userFollowData && userFollowData[journalName]) {
console.log(userFollowData)
} else {
let resultData = {
...userFollowData,
[journalName]: journalID
}
// prettier-ignore
await database.ref("/" + userID).set(resultData, () => dispatch(setJournalSubscriptions( resultData )));
}
};
};
const setJournalSubscriptions = journalSubscriptions => ({
type: types.JOURNAL_SUBSCRIPTIONS,
payload: journalSubscriptions
});
export {
subscribeToJournal,
setJournalSubscriptions
};
Все срабатывает, глобальный state меняется, но компонент не перерисовывается (не меняется иконка). render вызывается с уже обновленными данными, я проверял.
У меня предположение, что я неправильно прокидываю данные в props, в компонент RowCards