无法在React Native中实现Redux存储

时间:2017-06-23 20:28:36

标签: reactjs react-native redux-store

我正努力在select mh.* from (select mh.*, (case when 'MA' = lag(case when base_code in ('MA', 'MR') then base_code end ignore nulls) over (partition by cage_id order by event_date) = 'MA' then lag(case when base_code in ('MA') then animal_id end ignore nulls) over (partition by cage_id order by event_date) end) as male_animal, (case when 'FA' = lag(case when base_code in ('FA', 'FR') then base_code end ignore nulls) over (partition by cage_id order by event_date) = 'FA' then lag(case when base_code in ('FA') then animal_id end ignore nulls) over (partition by cage_id order by event_date) end) as female_animal, lead(event_date) over (partition by cage_id order by event_date) as next_event_date from mating_history mh ) mh where male_animal is not null and female_animal is not null; 应用中连接redux store,但似乎我错过了一些东西。任何帮助将不胜感激。

action.js

react-native

减速器/ dataReducer.js

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

减速器/ index.js

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

商品/ configureStore.js

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

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

main.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;
}

我还尝试连接Chrome扩展程序以查看redux商店更新,但没有运气。它总是说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; 。我怎样才能使这个工作?

2 个答案:

答案 0 :(得分:0)

store可以通过react-redux connect
在路由组件内的子类中访问 但这里没有商店,但我认为你可以做以下

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;

答案 1 :(得分: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);