Question

我有一个带有Redux的简单React Native应用。

当我尝试将应用程序状态连接到Redux状态时，它正在工作。
但是当我将redux状态映射到道具时，它不起作用。

我的redux-dev-tools给我一个完整的状态。

如果我记录我的道具，它是空的

版本

反应：“ 16.6.3”，
本机：“ ^ 0.57.1”，
react-redux：“ ^ 6.0.1”
redux：“ ^ 4.0.1”


//index.js

import { Provider } from 'react-redux';
import { createStore, combineReducers } from "redux";
import reducers from './src/reducers/index.js';

const store = createStore(reducers, {}, devToolsEnhancer({ realtime: true }));

const AppContainer = () => {
    return (
        <Provider store={store} >
            <App />
        </Provider>
    )
}


//App.js

import { connect } from 'react-redux';
import { setAccounts } from './src/actions';

const mapStateToProps = (state) => {
  console.log('state', state);
  return {
    accountArray: state.bankReducer.accountArray,
  }
};
export default connect(mapStateToProps, { setAccounts})(class App extends Component {

componentDidMount() {
   const accounts = new Date().getTime();
   this.props.setAccounts(accounts);
}

componentWillReceiveProps(nextProps) {
    console.log('New accounts array has been received', nextProps.accountArray);
  }

//index.js ../reducers

import { combineReducers } from "redux";
import bankReducer from './bankReducer';

export default combineReducers({
    bankReducer: bankReducer,
})


//bankReducer.js

import { ACCOUNTS_SET } from '../actions/actionTypes';

const initialState = {
    accountArray: [],
};

export default (state = initialState, action) => {
    switch (action.type) {
        case ACCOUNTS_SET:
        console.log('hello2');
            return { ...state, accountArray: action.payload }
        default:
            return state;
    }
}

//bankActions.js

import { ACCOUNTS_SET} from './actionTypes';

export const setAccounts = (accounts) => {

    console.log('hello2');

    return {
        type: ACCOUNTS_SET,
        payload: accounts
    }
};


my console [1]

I expect to have an accountsArray with value 2 in my props after I do mapStateToProps. 
The value of accountsArray stays empty


  [1]: https://i.stack.imgur.com/ENT8Y.png

Answer 1

您已经采取了行动……您需要在代码中的某个地方调用它……以便通过mapStateToProps函数接收一组新的道具

第二

createStore的第二个参数是preloadedState，第三个是您想要的增强子：

const store = createStore(reducers, {} , devToolsEnhancer({ realtime: true }));

示例

import { setAccounts } from 'your/path/to/actions/js-file';

class App extends React.Component {
  componentDidMount() {
    // Example calling your action:
    const accounts = 'your values';
    this.props.setAccounts(accounts);
  }

  componentWillReceiveProps(nextProps) {
    console.log('New accounts array has been received', nextProps.accountArray);
  }

  render() {
    //
  }
}

const mapStateToProps = (state) => {
  console.log('state', state);
  return {
    accountArray: state.bankReducer.accountArray,
  };
};

export default connect(
  mapStateToProps,
  { setAccounts },
)(App);

Answer 2

通过运行您在Github上发布的演示项目，我能够重现该问题：https://github.com/MaximWuyts/reduxIssueRN

我通过将react-redux降级到v5使其工作。所以我认为这是一个依赖问题/不匹配。

运行后运行正常

npm i react-redux@5
react-native start --reset-cache

为什么我的组件无法重新渲染或mapstatetoprops不起作用？

2 个答案: