Question

我正在开发带有react-native和redux的应用程序。我想将我喜欢的电影保存在商店中。因此，我设置了动作，reducer，商店，Provider，连接...

当我分派动作时，调用reducer并更改状态（我通过（nextState === state检查），但是从未调用mapStateToProps。

有关信息，调度动作和mapStateToProps来自同一组件。该组件在StackNavigator中。即使我只使用组件，问题仍然存在。

我猜想我正在改变状态，但事实并非如此。我被这个问题困扰了一段时间，我检查了所有现有问题，没有一个解决方案可以解决我的问题。

调度员：

 _toggleFavorite() {
    const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
    this.props.dispatch(action)
  }

减速器：

const initialState = { favoritesFilm: [] }
function toggleFavorite(state = initialState, action) {
  let nextState
  switch (action.type) {
    case 'TOGGLE_FAVORITE':
      const favoriteFilmIndex = state.favoritesFilm.findIndex(item => item.id === action.value.id)
      if (favoriteFilmIndex !== -1) {
        nextState = {
          ...state,
          favoritesFilm: state.favoritesFilm.filter( (item, index) => index !== favoriteFilmIndex)
        }
      }
      else {
        nextState = {
          ...state,
          favoritesFilm: [...state.favoritesFilm, action.value]
        }
      }
      console.log('state: ', state)
      console.log('nextState: ', nextState)
      console.log(nextState === state)
      return nextState
  default:
    return state
  }
}
export default toggleFavorite

与商店的连接：

const mapStateToProps = (state) => {
  console.log('changed')
  return {
    favoritesFilm: state.favoritesFilm
  }
}

export default connect(mapStateToProps)(FilmDetail)

导航器：

const SearchStackNavigator = createStackNavigator({
      SearchBar: { 
        screen: SearchBar,
        navigationOptions: {
          title: 'Rechercher'
        }
      },
      FilmDetail: {
        screen: FilmDetail
      }
    })
export default createAppContainer(SearchStackNavigator)

App.js：

import Navigation from './src/Navigation/Navigation';
import store from './src/Store/configureStore'
import { Provider } from 'react-redux'

export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <Navigation/>
      </Provider>
    );
  }
}

reduces的日志起作用。这里是一个例子：

state:  – {favoritesFilm: []} 
nextstate:  – {favoritesFilm: Array} 
false

日志（“已更改”）从不出现，也从不显示componentDidUpdate（）。此外，什么也不会重新呈现。

谢谢。

Answer 1

据我了解，您在分派操作之后在mapStateToProps中没有看到console.log('changed')。实际上，mapStateToProps只运行一次，在将更改分发给reducer后，它将向组件发送新的props，因此您可以通过钩子进行跟踪

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps会在调用render方法之前（无论是在初始安装还是在后续更新中）都被调用。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。

示例：

static getDerivedStateFromProps(props, state) {
  console.log('change', props);
}

为了在开发时跟踪Redux的更改，我建议使用Redux devtool https://github.com/zalmoxisus/redux-devtools-extension 该工具将为您节省很多时间。

Answer 2

找到解决方案.......经过几天的观察...... 版本问题：具有本机反应0.57.4和具有反应还原6.0.1 我将react-redux更改为5.1.0。

通过调度操作来更改状态，但不会调用mapStateToProps

2 个答案: