0

我正在努力连接应用程序redux store，react-native但似乎我错过了一些东西。任何帮助将不胜感激。

动作.js

export const getdata = (data) => {
   return (dispatch, getState) => {
      dispatch({
        type: "GET_DATA",
        data
     });
   };
};

减速器/dataReducer.js

export default (state = {}, action) => {
   switch (action.type) {
     case GET_DATA:
       return { ...state, response: action.data };
     default:
       return state;
   }
};

减速器/index.js

import { combineReducers } from 'redux';
import dataReducer from './dataReducer';
//other imports

export default combineReducers({
  data: dataReducer,
  //other reducers
});

存储/configureStore.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './../reducer;
export default function configure(initialState = {}) {
    const store = createStore(reducer, initialState, compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    ));
    return store;
}

main.js（我在其中调度操作）

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Routes from './Routes';
import configureStore from './store/configureStore';
import { getdata} from './actions';

const store = configureStore();

store.subscribe(() => {
  console.log('New state', store.getState); //doesn't update at all
});

class Main extends Component {
  componentDidMount() {
    store.dispatch(getdata('abc')); //calling action creator
  }

  render() {
    return (
      <Provider store={store}>
        <Routes />
      </Provider>
    );
  }
}

export default Main;

我还尝试连接 Chrome 扩展程序以查看 redux 商店更新，但没有运气。它总是说no store found。我怎样才能得到这个工作？

4

2 回答 2

0

可以通过 react-redux connect 在 Routes 组件内的子类中访问
store 但这里类中没有 store 但我认为您可以执行以下操作

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Routes from './Routes';
import configureStore from './store/configureStore';
import { getdata} from './actions';

const store = configureStore();

store.subscribe(() => {
  console.log('New state', store.getState()); //getState() is method
});
store.dispatch(getdata('abc'));
class Main extends Component {

  render() {
    return (
      <Provider store={store}>
        <Routes />
      </Provider>
    );
  }
}

export default Main;
于 2017-06-23T22:27:20.527 回答
0

你想从你的容器组件（又名智能组件，连接到 Redux 存储的组件）中调度你的操作。容器组件可以在 mapDispatchToProps 中定义让它们调度动作的道具。我没有你的代码，所以我只是假设你的 Routes 组件是你连接到 Redux 存储的容器组件。尝试类似：

class Routes extends Component {
 ....
 componentDidMount() {
   this.props.retrieveData();
 }
 ...
}

const mapStateToProps = state => {
  ...
};

const mapDispatchToProps = dispatch => {
  return {
    retrieveData: () => dispatch(getdata('abc'));
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Routes);
于 2017-07-17T06:31:17.597 回答