I have a problem with using Redux. I have created Reducer and it works fine, But the component state does not update. I saw some answers with similar problems but solutions don't work for me.
Reducer1:
export default (state = null, action) => {
switch (action.type) {
case 'select_library':
return action.payload
default:
return null;
}
}
Reducer2:
import data from './LibraryList.json';
export default () => data;
reducers:
export default combineReducers({
libraries: LibraryReducer,
selectedlibraryId: SelectionReducer
});
Action:
export const selectLibrary = (libraryId) => {
return {
type: 'select_library',
payload: libraryId
};
}
App:
const store = createStore(reducers);
const App = () => {
return (
<Provider store={store}>
<View style={{ flex: 1}}>
<Header headerText="Tech Stack" />
<LibraryList />
</View>
</Provider>
)
}
export default App;
LibraryList (works fine):
class LibraryList extends Component {
renderItem(library) {
return <ListItem library={library} />
}
render() {
return (
<FlatList
data={this.props.libraries}
renderItem={this.renderItem}
keyExtractor={(library) => library.id.toString()}
/>
)
}
}
const mapStateToProps = state => {
return { libraries: state.libraries }
}
export default connect(mapStateToProps)(LibraryList);
ListItem (problem here) is not call render after click ( click call mapStateToProps
):
class ListItem extends Component {
renderDescription() {
const {library, selectedLibraryId } = this.props
if (library.item.id === selectedLibraryId) {
return (
<Text>{library.item.description}</Text>
)
}
}
render() {
const { titleStyle } = styles
const { id, title } = this.props.library.item
return (
<TouchableWithoutFeedback
onPress={() => {
this.props.selectLibrary(id)
}
}
>
<View>
<CardSection>
<Text>
{title}
</Text>
</CardSection>
{this.renderDescription()}
</View>
</TouchableWithoutFeedback>
)
}
}
const mapStateToProps = state => {
return { selectedLibraryId: state.selectedLibraryId }
}
export default connect(mapStateToProps, actions)(ListItem);
i guess you are missing mapDispatchToProps function which will dispatch your action to reducer.? Something like this:
const mapStateToProps = state => { return { selectedLibraryId: state.selectedLibraryId } } const mapDispatchToProps = (dispatch) => { return { onLibraryClick: (id) => { dispatch(actions.selectLibrary(id)) } } } export default connect(mapStateToProps, mapDispatchToProps)(ListItem);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.