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;

TestRedux：

//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吗？

我遇到以下错误：“永久违反：在“ Connect（TestRedux）”的上下文中找不到“存储”。任一包裹根组件中，或传递自定义阵营上下文提供到与相应的反应。在连接选项上下文消费者连接（TestRedux）。”

Answer 1

此代码：

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

位于TestRedux内部的

应该位于index.js文件中，如下所示：

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

当然要导入您的商店。假设您没有在初始index.js文件中进行任何其他更改。

Redux：商店交换数据时出现问题

1 个答案: