Question

（跳至“ Query Reducer文件”标题，了解问题所在。）

我正处于设计电子邮件生成器的早期阶段。我现在要编写的核心功能是在单击时，该应用程序将获取预制行并将其嵌入到预制结构中以创建模块，然后稍后将完成的模块呈现给DOM。

我正在构建它，以便在将模块呈现给DOM时嵌入到结构中的行将由查询字符串的状态决定。

查询字符串将由按钮构建，这些按钮将对应于存储行组件（反应组件）的数组中的对象。

然后我要做的就是将查询字符串状态嵌套到结构中。

此阶段已接近准备就绪，但我不确定如何捆绑查询字符串缩减程序以将有效负载与行数组的ID组合在一起。

应用文件

此文件已导入，已连接到商店，并在索引文件中呈现为DOM。 最主要的是按钮将参数发送给queryAction

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { queryAction } from './store/actions/queryAction.js';
const mapStateToProps = (state) => {
  return {
    queryString: state.queryReducer
  }
}
const matchDispatchToProps = (dispatch) => {
  return bindActionCreators({ queryAction: queryAction }, dispatch)
}
class App extends React.Component {
  render() {
    const { queryString } = this.props;
    return (
      <div className="App">
        {console.log('stored query string = ' + queryString)}
        <button onClick={() => this.props.queryAction('1')}> Dispatch query string </button>
      </div>
    )
  }
}
export default connect(mapStateToProps, matchDispatchToProps)(App);

查询操作文件

将参数移至匹配的reducer （queryReducer）

export const queryAction = (i) => {
    console.log('/action');
    console.log('payload = '+ i);
    return {
        type: 'UPDATE_QUERY',
        payload: i
    }
};

Row Reducer文件

这里导入的head，body，btn和img组件是JSX化的电子邮件行组件，我用它们来构建可以调用的数组。

import React from 'react';
import { Head, Body, Btn, Img } from '../../rows.js';
const initState = {
    rows: [
        { 'row': <Img /> },
        { 'row': <Body /> },
        { 'row': <Btn /> },
        { 'row': <Head /> }
    ] 
}
const rowReducer =  (state = initState, action) => {
    return state;
}
export default rowReducer;

Query Reducer文件

在这里我遇见了比赛。
我可以用有效负载更新initState，这很简单。但是我无法理解如何使用有效载荷首先索引行数组，然后使用检索到的数组对象更新状态。最后一点是，对于每个交付的有效负载，将检索到的数组对象添加到最后一个数组的末尾。因此，构建了一个新的自定义数组。

然后我只需要将数组嵌入到结构中即可。然后，每当调用结构时。用户将已经定义了他们想要的结构中的哪些行，并呈现了完整的模块。

const initState = ''

const queryReducer =  (state = initState, action) => {
    switch(action.type){
        case 'UPDATE_QUERY':
            console.log('/reducer');
            return action.payload
    }
    return state;
}
export default queryReducer

###万一您需要看它###

这是索引文件，根减少器和结构文件之一的外观。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import rootReducer from './store/reducers/rootReducer.js';
import * as serviceWorker from './serviceWorker';

const store = createStore(rootReducer);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
serviceWorker.unregister();

减根剂

import {combineReducers} from 'redux'
import rowReducer from './rowReducer.js'
import queryReducer from './queryReducer.js'

const rootReducer = combineReducers({
    rowReducer: rowReducer,
    queryReducer: queryReducer
});

export default rootReducer

一个单列结构（忽略我在那里的行数组的索引。）

import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
  return {
      rows: state.rowReducer.rows
  }
}
class Single extends React.Component {
  render() {
    const { rows } = this.props;
    return (
      <div style={{ fontSize: 0, lineHeight: 0 }}>
        <table id="Table1" cellSpacing={0} cellPadding={0} border={0} width="100%">
          <tbody>
            <tr>
              <td valign="top" align="center" style={{ borderCollapse: 'collapse', borderWidth: 0 }} bgcolor="#D9E1E2">
                <table className="Table2" bgcolor="#FFFFFF" cellSpacing={0} cellPadding={0} border={0} width={680}>
                  <tbody>
                    <tr>
                      <td style={{ paddingTop: 24, paddingBottom: 24 }} align="center">
                        <table className="Table3" align="center" cellSpacing={0} cellPadding={0} border={0} width={604}>
                          {rows[1].row}
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
}
export default connect(mapStateToProps)(Single);

通过将操作有效负载与数组索引结合，将数组构建为redux状态

应用文件

查询操作文件

Row Reducer文件

Query Reducer文件

###万一您需要看它###

0 个答案: