Redux :存储交换数据的问题

Question

我想在我的反应原生应用程序上测试 Redux。 我浏览了几个组件 - 我希望一个组件 TestRedux 更新一个值，另一个组件 TestRedux2 使用 Redux 看到这个值。

我遵循了Redux上的几个教程并做到了：

行动：

//myApp/redux/Actions/action.js
import { ADD_RES } from "../Constants/action-types";
export function addResa(payload) {
  return { type: ADD_RES, payload: payload };
}

常数：

//myApp/redux/Components/action-types.js
export const ADD_RES = "ADD_RES";
export const DEL_RES = "DEL_RES";

减速器：

//myApp/redux/Reducers/resaReducer.js
import { ADD_RES } from "../Constants/action-types";
const initialState = {
  res: []
};
function resaReducer(state = initialState, action) {
  let nextState;
  switch (action.type) {
    case ADD_RES:
      nextState = {
        ...state,
        payload: action.payload
      }
      return nextState;
    default:
      return state
  }
}
export default resaReducer;

商店：

//myApp/redux/Store/store.js
import { createStore } from "redux";
import resaReducer from "../Reducers/resaReducer";
const Store = createStore(resaReducer);
export default Store;

测试冗余：

//myApp/redux/Components/TestRedux.js
// I use react-navigation to navigate between components. The component App is the first component and then trigger to testRedux
import React from 'react';
import { View, Text, Alert } from 'react-native';
import { ADD_RES } from "../Constants/action-types";
import {addResa} from "../Actions/actions";
import { connect } from 'react-redux'
import { Provider } from 'react-redux'
import Store from '../Store/store'
import App from '../../App';
const mapStateToProps = (state) => {
    return state.date
}
export class TestRedux extends React.Component {
  render() {
    this.props.dispatch(addResa(2));
    return (
      <View>
         <Button
              onPress={() => {this.props.navigation.navigate('TestRedux2')}}
              title='test'
          />
          <Provider store={Store}>
            <App/>
          </Provider>
     </View>
    )
  }
}
export default connect(mapStateToProps)(TestRedux)

TestRedux2：

//myApp/redux/Components/TestRedux2.js
import { connect } from 'react-redux'
import React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { ADD_RES } from "../Constants/action-types";
import {addResa} from "../Actions/actions";
import Store from '../Store/store'
const mapStateToProps = (state) => {
    return state.date
}
export class TestRedux2 extends React.Component {
            render() {
                        console.log("Value from TestRedux2 is", Store.getState())
                        return (
                                    <View>
                                               <Text> Hello </Text>
                                    </View>
                        )
            }
}
export default connect(mapStateToProps)(TestRedux2)

我是否正确使用Redux？

我有以下错误："不变违规：在"连接（TestRedux）"的上下文中找不到"存储"。要么将根组件包装在 中，要么在连接选项中将自定义 React 上下文提供程序传递给 Connect（TestRedux），并将相应的 React 上下文使用者传递给 Connect（TestRedux）。

Answer 1

此代码：

  <Provider store={Store}>
    <App/>
  </Provider>

它在你的 TestRedux 中，应该在你的索引.js文件中，如下所示：

render(
  <Provider store={Store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

当然是进口你的商店。这是假设您没有在初始索引.js文件中进行任何其他更改。