reactjs - 通过 Redux/React 链接 2 个组件

Question

我有 2 个不相关的组件，由于某种原因它们应该共享相同的状态。第一个组件包含一个按钮，单击该按钮应更改另一个组件的状态。

我已经使用 redux 实现了以下内容，但仍然出现错误。

我得到的错误：

在“Connect(Compoenent1)”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(Compoenent1)”。

我已经实现了以下内容： Component1：

function mapDispatchToProps (dispatch) {
    return bindActionCreators({
      refresh: (value) => ({
        type: 'UPLOAD_DONE',
        payload: {
          uploaded: value,
        },
      }),
    }, dispatch)
  }
  function mapStateToProps (state) {
    return {
      uploaded: state.uploaded,
    }
  }
  
class Component1 extends Component {
state = {
    uploaded: false,
}
 
  render () {
    return (
     <button onclick = () => this.props.refresh(true) />
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Component1)

组件 2：

function mapDispatchToProps (dispatch) {
  return bindActionCreators({
    refresh: (value) => ({
      type: 'UPLOAD_DONE',
      payload: {
        uploaded: value,
      },
    }),
  }, dispatch)
}
function mapStateToProps (state) {
  return {
    uploaded: state.uploaded,
  }
}

const Component2= props => {
  const [fetchVideos, setFetchVideos] = useState([])
 

  useEffect(() => {
    setFetchVideos(true)
  }, [props])


  const toggleDir = () => {
    const dirVal = sortDir === 'asc' ? 'desc' : 'asc'
    setSortDir(dirVal)
  }

  return (
  <div> {fetchVideos} </div>
  )
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Component2)

减速器：

function upload (state, action) {
    return {
      ...action.payload.uploaded,
    }
  }

export default makeReducer({
  UPLOAD_DONE : (state, action) => upload(state, {
      ...action,
      payload: {
          uploaded: action.payload.uploaded,
      },
  }),
}, null)

连接组件

const App = () => (
  <div>
    <Component2/>
    <Component1/>
  </div>
)

export default App

索引.js

export default function () {
  const defaultState = reducer()

  const initialState = {
    ...defaultState,

    uploaded: false,
  }

  const store = createStore(reducer, initialState)
  setAppElement('#root')
  return {
    element: (
      <Provider store={store}>
        <div>
          {devTools}
          <App></App>
        </div>
      </Provider>
    ),
  }
}

标签： reactjsredux