将文本值传递给另一个组件

Question

如何在React中使用Redux将文本值传递给另一个组件？

我正在React中学习Redux。我正在尝试使用React中的Redux将文本值传递给另一个组件。

我的代码如下

Mycomponent.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
class Mycomponent extends Component {
state = {
textInput: '',
}
handleChange = event => {
this.props.dispatch({ type: "add" });
}
render = () => {        
return (
<div>
<input
type="text"
onChange={this.handleChange} />
</div>
);
}
}
const mapStateToProps = state => ({ nameState: state.nameState});
export default connect(mapStateToProps)(Mycomponent);

nameAction.js

export const nameAction = () => ({
type: 'add'
});
export default { nameAction };

nameReducer.js

const nameReducer = (state = {}, action) => {
switch (action.type) {
case 'add': {
return {
...state,
nameState: action.payload
};
}
default:
return state;
}
};
export default nameReducer;

输出组件.js

import React, { Component } from 'react';
class Outputcomponent extends Component {
render = (props) => {
return (
<div>
<div>{this.props.nameState }</div>
</div>
);
}
}
export default Outputcomponent;

Answer 1

Josiah解释的使用redux钩子对我来说是最好的方法，但你也可以使用mapDispatchToProps。

即使主要问题是您在"添加"操作中没有传递任何数据

nameAction.js

您调用nameReducer.js中的action.payload，但它不会出现在您的操作中

export const nameAction = (text) => ({
type: 'add',
payload: text
});

Mycomponent.js

然后对于您的状态，我们可以映射DispatchToProps。

(我认为最好用提交按钮触发操作，并将输入更改保存在textInput状态，但我想这是故意的，没有(

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {nameAction} from './nameAction'
class Mycomponent extends Component {
state = {
textInput: '',
}
handleChange = event => {
this.props.nameAction(event.target.value);
}
render = () => {        
return (
<div>
<input
type="text"
onChange={this.handleChange} />
</div>
);
}
}
const mapStateToProps = state => ({ nameState: state.nameState});
const mapDispatchToProps = dispatch => ({ nameAction: (text) => dispatch(nameAction(text))});
export default connect(mapStateToProps,mapDispatchToProps)(Mycomponent);

输出组件.js

获取数据有两种可能性，一种是使用connect和mapStateToProps的类，另一种是将useSelector挂钩与函数组件一起使用。

带有类别

import React, { Component } from "react";
import { connect } from "react-redux";
class OutputComponent extends Component {
render = () => {
return (
<div>
<div>{this.props.nameState}</div>
</div>
);
};
}
const mapStateToProps = state => state;
export default connect(mapStateToProps)(OutputComponent);

带有功能组件

import React from "react";
import { useSelector } from "react-redux";
const OutputComponent = () => {
const nameState = useSelector((state) => state.nameState);
return (
<div>
<div>{nameState}</div>
</div>
);
};
export default OutputComponent;

当然，您不能忘记创建strore并将其提供给最高组件

store.js

import { createStore } from "redux";
import nameReducer from "./nameReducer";
const store = createStore(nameReducer);
export default store;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);

Answer 2

组件

const AddTodo = () => {
const [todo, setTodo] = useState("");
const dispatch = useDispatch();

const handleChange = (e) => setTodo(e.target.value);
const handleSubmit = (e)  => {
e.preventDefault();
dispatch(addTodoAction(todo));
} 
return {
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleChange} />
</form>
}
)

操作

const addTodoAction = (text) => {
dispatch({
type: "ADD_TODO",
payload: text
})
}

减速器

const addTodoReducer = (state, action) => {
switch(action.type) {
case "ADD_TODO":
return {
todo: action.payload,
}
default:
return state;
}
}

商店

// some code for store.js

从另一个组件访问此todo

const ComponentA = () => {
const {todo} = useSelector(state => state.todo);
return (
<p> {todo} </p>
)
}

旁注：

• Redux附带了太多样板文件，如果您想将文本从一个组件传递到另一个组件，只需使用props