Redux React。 Connect不会更新组件的状态

Question

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

Answer 1

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